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

Posted 2023-02-22

【中文标题】生产/构建中的 Material-UI 渲染错误

【英文标题】：Material-UI Rendering Bugs in production / build

【发布时间】：2020-10-09 22:08:08

【问题描述】：

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

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

但是当通过 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"
  

---

Production-Version 和 Dev-Version 中的视图图像

我不知道为什么，但几分钟前我也遇到了问题 标题比这张图片更小，但我现在无法重现...... 有时效果更好，有时效果较差，但遗憾的是不适合这样发货。

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

（在开发模式下，没有一个视图不工作...仅在构建时发生）

---

我已经尝试过的

尝试更新 MUI 并将其降级到第一个 4.0.0 版本 Material UI Styles Not Rendering 提供唯一的类名。

没有任何效果……很遗憾。

---

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

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

【问题讨论】：

我无法提供任何来源，因为整个应用程序很大。但是github.com/mui-org/material-ui/issues/21502 有一个与我的问题相同的示例

是什么让您认为material-ui 是这里的问题？开发者控制台中是否有任何错误消息？

因为github.com/mui-org/material-ui/issues/21502 有同样的问题，我实际上并不确定 MUI 是否是问题所在。不，控制台中没有任何错误消息

我建议从您的依赖项中删除 "@material-ui/styles": "4.10.0",。我还建议创建最简单的应用程序版本（包括尽可能简化 package.json），它仍然会重现问题。然后在您的问题中包含 package.json 和重现问题所需的代码。 GitHub 问题已关闭，因为 Material-UI 的问题是针对错误报告和功能请求，而不是针对支持。即使它最终成为一个错误，也是一个支持请求，要求 MUI 进行工作以确定问题是在 MUI 中还是您自己的项目中。

您的问题解决了吗？你能和我们分享一下网络控制台日志吗？

【参考方案1】：

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

【讨论】：

这仅在用户升级到完全发布的 v5 时有效

【参考方案2】：

我遇到了材质 UI 的 Appbar 和 Navigation Drawer 的问题。

这可能发生的第一个原因是由于类名冲突一次 您的代码在生产包中。

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

在我的 Layout 组件中，它有 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",

【讨论】：

它有效，谢谢...我以为我要疯了

如果您在运行 material-ui 的 nextjs 解决方案中从 webpack 4 升级到 5 时遇到问题，则此解决方案有效

【参考方案3】：

感谢@Mordechai 节省时间。

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

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

【参考方案4】：

我遇到了完全相同的问题。事实证明，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)

【讨论】：

@Antex 这有帮助吗？

const useStyles = makeStyles( // your styles here , index: 1) 工作！！！！！

为答案添加了更多细节

@Antax 如果这回答了您的问题，请继续奖励赏金。如果你让它通过宽限期，没有人会从中受益。您将不会取回代表。 See here

我 6 年来第一次登录 SO 只是为了感谢您！