I am using Material ui sx styling with breakpoints, for example:
<Box
sx={{
height: 233,
width: 350,
maxHeight: { xs: 233, md: 167 },
maxWidth: { xs: 350, md: 250 },
}}
/>
Because I am using Nextjs and SSR (ISR),
it cause an issue that when the page rendered it rendered twice one time with incorrect breakpoint values and then the user experience big CLS - Cumulative Layout Shift
How can I work with Material ui sx styling breakpoints and prevent this first render with incorrect values?
