Resolved: Chakra ui Button not rendering

Question:

I am trying to change color and size of Button from the Chakra UI. I am unable to figure out why nothing is changing.

import './App.css';
import { Textarea, Stack, Button } from '@chakra-ui/react';
function App() {


  return (
    <>
    <div className="App">
      <h1>Notes App</h1>
      <Textarea
        placeholder="Enter your note"
        size='sm'
        width='50%' />
    </div>
    <div>
      <Button colorScheme='blue'>Button</Button>
    </div>
    </>
  );
}

export default App;

Answer:

you have to wrap your App component with ChakraProvider to “inject” chakra’s CSS. You have that step in the documentation on this link https://chakra-ui.com/guides/getting-started/cra-guide#2-provider-setup Also, take a look at previous steps if you had setup everything in the same way as it is in the documentation.

If you have better answer, please add a comment about this, thank you!

Resolved: Chakra ui Button not rendering

Resolved: Is pandas groupby() function always produce a DataFrame with the same order respect to the column we group by?

Resolved: Kivy widget hierarchy not behaving as expected

Resolved: Pandas Groupby Get Values from Previous Group

Leave A Reply