Chakra UI Responsiveness Not Reflecting on UI

Question

I have used Chakra UI for styling a project in Next.js. While most of the styles and components are working as intended, I am having trouble in implementing responsive layout as the style defined does not apply to component on decreasing screen size.

Setup

• Breakpoints

       const breakpoints = createBreakpoints({ sm: '34em', md: '60em', lg: '76.8em', xl: '144em', });
  

• theme.ts

   export const chakrauiTheme = extendTheme({
     breakpoints,
     colors: {
       brand: {
         main: '#fff',
       },
     },
   });
  

• Wrapped _app.tsx with ChakraProvider with theme={chakrauiTheme} prop

• There are three ways of implementing responsive style in ChakraUI,

1. Using Array Syntax

<Box w={[300,400,500,600]}>

2. Using Object Syntax

<Box w={{sm: 300, md: 400, lg: 500, xl:600}}>

3. Third one is to import useBreakpointValue() which I have not tried yet

In theory, the styling should work but the changes are not reflecting in my layout. Current Implementation

 export const FormInputWrapper: any = {
  display: 'flex',
  flexDirection: 'column',
  gap: '1rem',
  backgroundColor: ['red', 'green', 'yellow', 'pink'],
  // The color properties are just to see if any changes appear or not.
  width: ['100%', '60%', '60%', '50%'],
};

In the component

<Box {...FormInputWrapper}>

Tried the first two ways, but none work

Please, provide insights on what I might have missed.

Thank you.

Packages: "@chakra-ui/react": "^1.8.6" "next": "12.1.0"

Might be irrelevant but the _app.js looks like this,

<CacheProvider value={emotionCache}>
  <ChakraProvider theme={chakrauiTheme}>
    <ThemeProvider theme={muiTheme}>
      {/* <CssBaseline /> */}
      <Component {...pageProps} />
    </ThemeProvider>
  </ChakraProvider>
</CacheProvider>

Answer 1

I think its because createBreakpoints() is no longer supported You should use this instead.