Chakra UI full height component

Question

How to set my App component to full height? I even tried to set body tag to height 100% in my index.html but it didn't work out

Answer 1

Just use css calc in your component: <Box h='calc(100vh)' />

Answer 2

In React.js you don't usually tinker around with the body tags (unless you know what you're doing). The standard practice is to create a Container Chakra component & apply respective Style Props to it.

On that note, here's what you can do instead:

// in your App.js

import { ChakraProvider, Container } from "@chakra-ui/react"

function App() {
  return (
    <ChakraProvider>
      <Container minHeight="100vh">
        { /* ... contents of the container */ }
      </Container>
    </ChakraProvider>
  )
}

Notice the minHeight style prop passed to the Container component. Chakra-UI will then style the container as if you're styling the "container" using the the min-height CSS property.

You can style that specific "container" with as many style props as Chakra-UI! And I recommend going through the documentations (see shared URL above) to figure what other style props are supported.

P.S: You can use a Box component too! But I prefer (and suggest) using the Container component instead because of its responsiveness & the ease of constraining it's child elements.