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

EDIT:可重现的错误https://github.com/ganavol409/next-material-ui-classes-bug 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 https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js+ 下一个带有 Material ui 和 Material 样式的 JS 项目

当前行为：

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

预期行为：

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

Code:

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

smContainerWidth: {
    maxWidth: '750px'
},

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

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

自动路由器推送

我已经复制了你的例子，但我没有这种行为。当您重新加载页面时，以及当您单击下一个链接转到该页面时，750px 最大宽度将发挥作用。

这是代码 https://github.com/mkrtchian/next-material-ui-classes-bug/blob/master/pages/about.js#L23（样式在关于页面上），并且这是现场版本 https://mkrtchian.github.io/next-material-ui-classes-bug/.

Edit:

我认为你的问题不是来自 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();
  ...