material-ui - 使用 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>
  );
}

基本的东西，onScreen 是一个使用 Intersection Observer 的切换布尔值

为了“对 SEO 友好”，我正在使用 NextJS，并且我希望这个组件在 SSR 中始终可见，并且在 CSR 中有条件地可见。

问题出现在 CSR 的补液过程中，似乎重新创建了惰性组件之后的一些类名，并且我在第二个 Box 组件中失去了样式。

我创建了这个 CodeSandbox 来看看：https ://codesandbox.io/s/nextjsmaterialuiclassnamemismatch-1j4oi

这是 MaterialUI、JSS 中的错误吗？或者很可能我做错了什么？

标签： material-uilazy-loadingnext.jsintersection-observer