Несоответствие имен классов при использовании Material-UI и NextJS

Question

Использование Intersection Observer API Я пытаюсь визуализировать компонент Material-UI с помощью видимости в области просмотра.

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>
  );
}

Basi c вещи, onScreen - переключенное логическое значение с использованием Intersection Observer

Чтобы быть «дружественным к SEO», я использую Next JS, и я хотел, чтобы этот компонент всегда был видимым в SSR и условно видимым в CSR.

Проблема возникает во время регидратации в CSR, кажется, что некоторые имена классов после ленивого компонента воссоздаются, и я теряю стилизацию во втором компоненте Box.

Я создал этот CodeSandbox, чтобы иметь взгляд: https://codesandbox.io/s/nextjsmaterialuiclassnamemismatch-1j4oi

Это ошибка в MaterialUI, JSS? Или, скорее всего, я что-то не так делаю?