Question

使用交叉口观察器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-UI和NextJS的类名不匹配

0 个答案: