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.