生产/构建中的物料用户界面渲染错误

Question

我有很大的问题，建立我的反应-应用。

我正在使用的资料-ui/核心v.4.10.2在正常的反应-脚本启动开发服务器，一切都很完美。

但是当通过Nginx或npm-模块服务构建和服务时，渲染工作不正确.

(我在材料上看到了类似的问题-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"
  }
}

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

​

​

我不知道为什么，但几分钟前我也遇到了一个问题，就是标题比这张图片还要小，但我现在不能复制。有时它更好，有时更少，但它不适合像这样不幸地被运出。

但是，在这个GIF中，您可以看到更多这样的问题：

​

(在开发模式中，在构建时没有一个不是working...Only的视图)

我已经尝试过的

• 尝试更新MUI，并将其降级到最初的4.0.0版本
• 材质UI样式不呈现
• 给出了独特的classNames。

没什么worked...sadly。

我希望有人有类似的问题。我看到有人在MUI的Github上开了个问题，但就像我说的，它不幸地被关闭了

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

Answer 1

我也有过同样的问题。事实证明，Webpack会乱搞物质UI的JSS优先规则。您需要使用index选项手动重写注入顺序。

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

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

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

Answer 2

我对Appbar和material的导航抽屉有一个问题。

这种情况可能发生的第一个原因是，一旦代码处于生产包中，类名冲突就会造成。

根据资料用户界面常见问题(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"，"react"："^17.0.1"，

Answer 3

谢谢你@摩尔德凯，谢谢你为我节省时间。

@antax，这个解决方案甚至适用于主题。你好像把语法搞砸了。

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