生产/构建中的Material-UI渲染错误 [英] Material-UI Rendering Bugs in production / build

问题描述

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

I am using material-ui/core v.4.10.2 on the normal react-scripts start dev-server everything works perfectly.

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

But when built and served through Nginx or npm-module serve the rendering is not working correctly...

(我在材料用户界面Github上看到了类似的问题，但都被(错误地)关闭了

(I saw similar issues on the material-ui Github, but they were all (falsely) closed

{
  "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"
  }
}

---

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

我不知道为什么，但是几分钟前我还遇到了一个问题标头甚至比这张图片还要小，但我现在无法重现...有时效果更好，有时效果更好，但可悲的是不适合这样运送.

I don't know why, but a few minutes ago I also had the problem that the the header is even smaller as in this image, but I couldn't reproduce that right now... Sometimes it works better, sometimes less, but it's not suitable to get shipped like this sadly.

但是在此GIF中，您会看到更多类似这样的问题:

But in this GIF you see more issues like this:

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

(In Dev-Mode there is not a single view that is not working...Only happens when building)

• 试图更新MUI并将其降级到第一个4.0.0版本
• 材质UI样式未呈现
• 赋予唯一的类名.

什么都没有...很难.

Nothing worked...sadly.

---

我希望任何人都有类似的问题.我看到有人在MUI的Github上打开一个问题，但就像我说的那样，它已关闭

---

I hope that there is anybody that had similar issues. I saw someone opening an issue on MUI's Github, but like I said it's sadly closed

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

推荐答案

我遇到了完全相同的问题.事实证明，Webpack会与Material UI的JSS优先级规则混为一谈.您需要使用index选项手动覆盖注入顺序.

I had the exact same issue. Turned out that Webpack would mess around with Material UI's rules of JSS precedence. You need to manually override the injection order using the index option.

在您的 makeStyles()或 withStyles()中，添加 {index:1} :

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

// HOC 
MyComponent = withStyles({
    // your styles here
}, {index: 1})(MyComponent)

这篇关于生产/构建中的Material-UI渲染错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！