Classnames mismatch using Material-UI and NextJS

Question

Using Intersection Observer API I'm trying to render a Material-UI Component by visibility on the viewport.

export default function Index() {
  const [onScreen, theRef] = useOnScreen({
    rootMargin: "-300px",
    ssr: true
  });  
  const classes = useStyles();
  return (
    <Container maxWidth="sm">
      <DummyContainer />
      <div
        ref={theRef}
        style={{
          height: "100vh",
          padding: "20px",
          backgroundColor: "green",
          transition: "all .5s ease-in"
        }}
      >
        {onScreen && (
          <Box className={classes.rootBox} my={16}>
            <Typography variant="h2" gutterBottom>
              Content Lazy using Intersection Observer
            </Typography>
            <Copyright />
          </Box>
        )}
      </div>
      <Box className={classes.rootBox} my={4}>
        <Typography variant="h2" gutterBottom>
          Content no lazy, why this Box loses margin?
        </Typography>
        <Typography gutterBottom>
          If you request this page with JavaScript disabled, you will notice
          that has been properly rendered in SSR
        </Typography>
      </Box>
    </Container>
  );
}

Basic stuff, onScreen is a toggled boolean using Intersection Observer

In order to be "SEO friendly" I'm using NextJS and I wanted this component to always be visible in SSR and conditional visible in CSR.

The problem arises during rehydration in CSR, it's seems that some classnames after the lazy component are recreated and I'm losing styling in second Box component.

I've created this CodeSandbox to have a look : https://codesandbox.io/s/nextjsmaterialuiclassnamemismatch-1j4oi

Is this a bug in MaterialUI, JSS? Or most probably I'm doing something wrong?

Classnames mismatch using Material-UI and NextJS

0 Answers0