reactjs - Chakra UI variant prop is not changing the style of the Button component - Stack Overflow

admin管理员组

文章数量:1026989

I am trying to use Chakra UI for styling my application and the select styling props are not working. For example, I tried using the Button component and the variant prop is not working but the size prop seems to be working.

To recreate the issue:

1. npm create vite
2. input the name of the project, select react and javascript
3. go into the folder and npm i
4. run npm i @chakra-ui/react @emotion/react
5. run npm install -D @chakra-ui/cli
6. run npx @chakra-ui/cli snippet add button 7.main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from "./components/ui/provider"

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider>
      <App />
    </Provider>
  </StrictMode>,
)

8. App.jsx

import './App.css'
import { Button } from "./components/ui/button"

function App() {
  

  return (
    <>
      <Button variant="solid">Button</Button>
    </>
  )
}

export default App

I created a separate repo to see if I could get it to work, which produced a different result in terms of the style (the one in my actual application looks like the default React button event though it was imported from Chakra UI), but the problem still remains.

I checked the version and the imports but it is the most updated version and there doesn't seem to be anything else to import.

I am trying to use Chakra UI for styling my application and the select styling props are not working. For example, I tried using the Button component and the variant prop is not working but the size prop seems to be working.

To recreate the issue:

1. npm create vite
2. input the name of the project, select react and javascript
3. go into the folder and npm i
4. run npm i @chakra-ui/react @emotion/react
5. run npm install -D @chakra-ui/cli
6. run npx @chakra-ui/cli snippet add button 7.main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from "./components/ui/provider"

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider>
      <App />
    </Provider>
  </StrictMode>,
)

8. App.jsx

import './App.css'
import { Button } from "./components/ui/button"

function App() {
  

  return (
    <>
      <Button variant="solid">Button</Button>
    </>
  )
}

export default App

I created a separate repo to see if I could get it to work, which produced a different result in terms of the style (the one in my actual application looks like the default React button event though it was imported from Chakra UI), but the problem still remains.

I checked the version and the imports but it is the most updated version and there doesn't seem to be anything else to import.

本文标签： reactjsChakra UI variant prop is not changing the style of the Button componentStack Overflow