javascript - Next JS 在刷新之前无法正确加载 Material UI 样式

Question

编辑:可重现的错误 https://github.com/ganavol409/next-material-ui-classes-bug

似乎与 HoC 组件一起发生并且都从 Material UI 导入 useStyles

---

已实现的内容:

https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js+下一个带有material ui和material styles的js项目

当前行为:

页面 CSS(特别是 Material UI 中的“类”字段)在来自 Next JS Link/Next JS Router 模块时不会加载。刷新“类”字段加载后

预期行为:

如果用户来自 Next JS Link/Next JS Router 模块或手动输入网站地址，则所有 css 加载(目前仅在用户手动编写或刷新网站/页面时有效)

代码:

<Container maxWidth="sm" disableGutters classes={{ maxWidthSm: classes.smContainerWidth }}>
...
</Container>

smContainerWidth: {
    maxWidth: '750px'
},

 useEffect(() => {
    router.push('/');
 }, []);

如果用户来自 Next JS Link/Next JS Router 而不是 750px，则容器将加载默认的 600px 宽度，并且在用户刷新容器后宽度将为 750px

自动路由推送

Answer 1

我已经复制了您的示例，但我没有这种行为。 750 像素的最大宽度在您重新加载页面时起作用，但在您单击下一个链接转到该页面时也起作用。

Here is the code (样式在about页面)，here is a live version .

编辑:

我认为你的问题不是来自 HoC，而只是来自导入一个文件，其中 makeStyles 已经在 2 个不同的页面中被调用。

要解决它，您可以导出一个函数，该函数在调用时将调用 makeStyles:

// in styles.js
const useStylesCreator = () => {
  return makeStyles((theme) => {
    return {
      hoverElevationCapitalizeButton: {
        padding: "9px 23.1px",
        textTransform: "none",

        "&:hover": {
          boxShadow:
            "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
        },
      },
    };
  });
};
export default useStylesCreator;

// in your components
const Login = HoCA(() => {
  const classes = useStylesCreator()();
  ...

或者，可能更优雅，您可以导出一个包含样式的对象，并仅在组件文件中导入后调用 makeStyles:

// in styles.js
const styles = {
  hoverElevationCapitalizeButton: {
    padding: "9px 23.1px",
    textTransform: "none",

    "&:hover": {
      boxShadow:
        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
    },
  },
};
export default styles;

// in your components
const useStyles = makeStyles((theme) => styles);

const Login = HoCA(() => {
  const classes = useStyles();
  ...