I'm currently working on an app in next.js with chakra UI, and I'm facing a challenge when trying to add a footer. The issue is that I can't seem to get the components under the navbar to fill up the remaining height of the screen.
It appears that my problem might be related to not properly passing CSS styles down to the components.
_app.tsx
import '../styles/globals.css';
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Navbar></Navbar>
<Component id='component-container' {...pageProps} />
)
}
export default MyApp
styles/globals.css
#component-container {
height: 100%
}
Even if I set the #component-container to have something like color: white, I don't see this CSS being applied to the child components. It seems like I'm missing something in terms of passing the CSS down to the components.
Anyone know how to correctly apply CSS to all components in next.js?