useMediaQuery does not work with SSR styles

I have tried to create a codepen for it, but was unable to: https://codesandbox.io/s/no-margin-chakra-forked-zcygd?file=/src/App.tsx

The issue seems to be that everything is reported correctly, the only issue being the styles are out of alignment with what is being rendered and reported:

  const [baseLg] = useMediaQuery((max-width: 35em))
  const marginX = `${space[baseLg ? 1 : 0]} !important`
  console.info(marginX)

  return (
      <GridItem
        data-marginX={marginX}
        mx={marginX}
      >
)

Output:

So on initial load, the text rendered is correct, but the styles are incorrect. Then when i change from portrait to landscape back to portrait, the styles are correct. As seen here:

I am unsure, but I assumed that useMediaQuery would generate css media queries, rather than imitate media queries with JS.

It may not be an issue, but it feels like one to me 😃

[segunadebayo]

Yes, useMediaQuery is a client-side only hook since it uses window.matchMedia. For this, I’d recommend using a media query style object in sx or css prop, like @callumflack suggested.

You can also consider tweaking the breakpoint in the theme as well and passing responsive values (as object or array).

Cheers.

[marco-emmanuel-noto]

I found this solution. #3124 (comment)

Also, I heard that useBreakpointValue supports SSR, so I tried it and it worked. Maybe like this.

  const isMinWidthLg = useBreakpointValue({ lg: true })

  return <GridItem mx={isMinWidthLg ? 1 : 0}>
  // or
  return <GridItem {...(isMinWidthLg && { mx: 1 })}>

True but always be careful because this approach for styling can lead to a huge CLS when doing server-side rendering, which in turn will hinder your site’s performance.