生产/构建中的 Material-UI 渲染错误

IT技术 node.js reactjs material-ui react-scripts
2021-04-08 06:58:26

我在构建我的 react-app 时遇到了大问题。

我在正常的 react-scripts start dev-server 上使用 material-ui/core v.4.10.2 一切正常。

但是当通过 Nginx 或 npm-module serve 构建和提供服务时,渲染无法正常工作......

(我在material-ui Github上看到过类似的问题,但是都被(假地)关闭了


这是我的 package.json 以防我的依赖项出现问题(我当然不认为是这种情况)

{
  "name": "web_app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.10.2",
    "@material-ui/styles": "4.10.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "rc-color-picker": "^1.2.6",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-infinite-scroll-hook": "^2.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.1.1",
    "tinycolor2": "^1.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@date-io/date-fns": "^1.3.11",
    "@material-ui/pickers": "^3.2.7",
    "@mui-treasury/styles": "^1.1.0",
    "@trendmicro/react-sidenav": "^0.4.5",
    "browserfs": "^1.4.3",
    "cronstrue": "^1.85.0",
    "date-fns": "^2.0.0-beta.5",
    "formik": "^2.1.4",
    "i18next": "^17.0.13",
    "i18next-browser-languagedetector": "^3.0.3",
    "i18next-xhr-backend": "^3.1.2",
    "lodash": "^4.17.15",
    "material-ui-confirm": "^2.0.4",
    "moment": "^2.24.0",
    "react-animated-slider": "^2.0.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-blur-image-loader": "^0.2.2",
    "react-digital-clock": "^0.1.2",
    "react-dropzone-uploader": "^2.10.1",
    "react-fine-uploader": "^1.1.1",
    "react-i18next": "^10.12.2",
    "react-image-lightbox": "^5.1.1",
    "react-picky-date-time": "^1.3.2",
    "react-router-dynamic-breadcrumbs": "^2.2.0",
    "react-sticky-el": "^2.0.5",
    "recompose": "^0.30.0",
    "store2": "^2.10.0",
    "tubular-react": "^4.1.31",
    "yup": "^0.28.4"
  }
}


生产版和开发版视图的图像

图像01

我不知道为什么,但几分钟前我也遇到了标题甚至更小的问题,就像这张图片一样,但我现在无法重现......有时效果更好,有时效果更差,但是可悲的是不适合像这样发货。

但是在这个 GIF 中,你会看到更多这样的问题: animation

(在开发模式下,没有一个视图不起作用......只在构建时发生)


我已经尝试过的

没有任何效果……可悲的是。


我希望有人遇到过类似的问题。我看到有人在 MUI 的 Github 上打开了一个问题,但就像我说的那样遗憾地关闭了

https://github.com/mui-org/material-ui/issues/21502

4个回答

我有完全相同的问题。原来,Webpack 会破坏 Material UI 的 JSS 优先级规则。您需要使用 index 选项手动覆盖注入顺序。

在您的makeStyles()or 中withStyles(),添加{index: 1}

//Hook
const useStyles = makeStyles({
    // your styles here
}, {index: 1})

// HOC 
MyComponent = withStyles({
    // your styles here
}, {index: 1})(MyComponent)
@Antex 这有帮助吗?
2021-06-01 06:58:26
为答案添加了更多细节
2021-06-02 06:58:26
const useStyles = makeStyles({ // your styles here }, {index: 1}) 作品!!!!!
2021-06-03 06:58:26
我 6 年来第一次登录 SO 只是为了告诉你谢谢你!!
2021-06-12 06:58:26
@Antax 如果这回答了您的问题,请继续奖励赏金。如果你让它通过宽限期,没有人会从中受益。不会找回代表。看这里
2021-06-15 06:58:26

我遇到了材质 UI 的Appbar 和导航抽屉的问题

一旦您的代码在生产包中,这可能发生的#1 原因是由于类名冲突。

根据 Material UI 常见问题解答 ( https://material-ui.com/getting-started/faq/ ),StylesProvider是解决此问题的方法。它对我有用!这就是我所做的-

具有 Appbar、工具栏、导航抽屉的布局组件中,我将整个渲染代码包含在

import { StylesProvider } from '@material-ui/core/styles';

    return (
        <StylesProvider injectFirst> 
            //rest of my code
            <div></div>
        </StylesProvider>
    );

您可以按照https://material-ui.com/styles/api/#stylesprovider 上的官方示例进行操作

使用 "@material-ui/core": "^4.11.3","re​​act": "^17.0.1",

它有效,谢谢...我以为我要疯了
2021-05-29 06:58:26
如果您在运行 material-ui 的 nextjs 解决方案中从 webpack 4 升级到 5 时遇到问题,则此解决方案有效
2021-05-31 06:58:26

感谢@Mordechai 为我们节省了时间。

@antax,该解决方案甚至适用于主题。看来你搞砸了语法。

makeStyles(theme => ({ /* your styles here */ }), {index: 1});  //WILL WORK!!! 

根据Material Ui@mui/styles已弃用。而是使用内联样式sx={{ //your style }}

这仅在用户已升级到完全发布的 v5 时有效
2021-06-10 06:58:26