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

16

我在构建我的React应用程序时遇到了很大的问题。

我正在使用material-ui/core v.4.10.2,

在普通的react-scripts启动开发服务器上一切都运行得非常完美。

但是当通过Nginx或npm模块 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"
  }
}


生产版本和开发版本的视图图片

Image01

我也不知道为什么,但几分钟前我也有过这个问题,标题栏比此图片中的还要小,但我现在无法重现它... 有时效果会更好,有时会更差,但遗憾的是不能像这样发布。

但在这个 GIF 中,你可以看到更多的问题: Animation

(在开发模式下没有一个视图是无法工作的...只有在构建时才会出现)


我已经尝试过的

可惜没有任何效果...


我希望有人有类似的问题。 我看到有人在 MUI 的 Github 上开了一个 issue,但如我所说,它已经被关闭了。

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


2
你为什么认为 material-ui 是问题所在?开发者控制台中有任何错误信息吗? - trixn
因为 https://github.com/mui-org/material-ui/issues/21502 存在相同的问题。我并不确定 MUI 是否是问题所在。否,控制台中没有任何错误消息。 - Antax
1
我建议从你的依赖项中删除 "@material-ui/styles": "4.10.0"。我还建议创建最简单的应用程序版本(包括尽可能简化 package.json),以便仍然能够重现问题。然后在你的问题中包含 package.json 和重现问题所需的代码。GitHub 问题已关闭,因为 Material-UI 的问题是用于报告错误和功能请求,而不是用于支持。即使最终结果是一个错误,请求 MUI 做出工作来确定问题是否在 MUI 或你自己的项目中,也是一种支持请求。 - Ryan Cogswell
你解决了问题吗?你能分享一下网页控制台日志吗? - JRichardsz
尝试在导入开始时导入CSS(紧随import React之后)。 - harish kumar
显示剩余2条评论
4个回答

34

我曾经遇到过完全相同的问题。事实证明,Webpack会干扰Material 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)

1
回答中添加了更多细节 - Mordechai
1
@Antax 如果这个回答解决了你的问题,请授予悬赏。如果你让它超过了宽限期,那么没有人会从中受益。你将__不会__收回声望值。请参见此处 - Mordechai
抱歉@Mordechai,我实际上忘记了这件事。非常抱歉 - 有太多事情要做,无法让这篇帖子继续存在:(。我可以看看是否能给你额外的赏金。 - Antax
3
我为了感谢你而在6年后第一次登录SO,特地来告诉你! - hdhdhdhdhdh
谢谢,还有一个小技巧是在属性末尾添加“!important”。 - Getzel
显示剩余3条评论

6

我遇到了与 Material UI 的 Appbar 和抽屉菜单有关的问题。

最可能的原因是一旦你的代码在生产捆绑包中时会出现类名冲突。

根据 Material UI FAQ (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"。

2
它可以工作了,谢谢...我以为我要疯了。 - Luka Samkharadze
如果您在运行Material-UI的Next.js解决方案中从webpack 4升级到5时遇到问题,那么此解决方案适用。 - Adam Diament
同样适用于 @mui/material 5.2.2(截至2022年)!感谢Leena! - kalpaj agrawalla

0

感谢 @Mordechai 挽救了这一天。

@antax,这个解决方案甚至可以在主题中使用。看起来您搞错了语法。

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

0
根据 Material Ui 的说法,@mui/styles 已经被弃用。 现在应该使用内联样式并将 sx={{ //your style }} 嵌入其中。

只有用户已升级到完全发布的v5版本,此内容才有效。 - Justin St. Germain

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接