时间戳

首页 > 解决方案 > Next JS 在刷新之前无法正确加载 Material UI 样式

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

问题描述

编辑： 可重现的错误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 + 下一个带有材质ui和材质样式的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 宽度

自动路由器推送

标签： javascriptreactjsmaterial-uinext.js

解决方案

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

这是代码（样式在关于页面上），这是一个实时版本。

编辑：

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

推荐阅读