I recently integrated Chakra UI for styling a project on Next.js, and while most components are functioning properly, I am facing challenges with implementing responsive layouts. The styles do not seem to adapt when the screen size is reduced.
Here's my setup:
Defined Breakpoints
const breakpoints = createBreakpoints({ sm: '34em', md: '60em', lg: '76.8em', xl: '144em', });theme.ts configuration
export const chakrauiTheme = extendTheme({ breakpoints, colors: { brand: { main: '#fff', }, }, });Wrapped
_app.tsxwithChakraProviderusing theme={chakrauiTheme}There are three approaches in ChakraUI for responsive styling,
1. Utilize Array Syntax
<Box w={[300,400,500,600]}>
2. Use Object Syntax
<Box w={{sm: 300, md: 400, lg: 500, xl:600}}>
3. Another option is to import useBreakpointValue(), although I haven't tried it yet
In theory, these methods should work but unfortunately, I'm not seeing the expected changes in my layout. Current Style Implementation
export const FormInputWrapper: any = {
display: 'flex',
flexDirection: 'column',
gap: '1rem',
backgroundColor: ['red', 'green', 'yellow', 'pink'],
// Color properties added for testing purposes only
width: ['100%', '60%', '60%', '50%'],
};
Within the component
<Box {...FormInputWrapper}>
I've tried the first two methods without success
I would appreciate any insights on what might be missing from my implementation.
Thank you.
Related Packages:
"@chakra-ui/react": "^1.8.6""next": "12.1.0"Not directly related, but here's how the _app.js file looks like,
<CacheProvider value={emotionCache}>
<ChakraProvider theme={chakrauiTheme}>
<ThemeProvider theme={muiTheme}>
{/* <CssBaseline /> */}
<Component {...pageProps} />
</ThemeProvider>
</ChakraProvider>
</CacheProvider>