Node.js 生产/构建中的材质UI呈现错误 我在构建react应用程序时遇到了很大的问题。

我使用的是材料ui/core v.4.10.2 在正常情况下，react脚本启动dev服务器时，一切都能正常工作

但当通过Nginx或npm模块构建和服务时，渲染无法正常工作

（我在材料ui Github上看到了类似的问题，但它们都（错误地）关闭了

---

这是我的package.json，以防我的依赖项出现问题（我当然不这么认为）

---

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

我不知道为什么，但几分钟前我也有一个问题 标题甚至比这张图片更小，但我现在无法复制。。。 有时它工作得更好，有时更少，但它不适合像这样发货

但在这张GIF中，您会看到更多类似的问题：

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

---

我已经试过了

• 尝试更新MUI，并将其降级到第一个4.0.0版本
• 提供了唯一的类名

不幸的是，什么都没用

---

我希望有人也有类似的问题。 我看到有人在MUI的Github上发行了一期，但正如我所说的，它已经关闭了

---

我也遇到了同样的问题。原来Webpack会扰乱Material UI的JSS优先规则。您需要使用index选项手动覆盖注射顺序

在

makeStyles（）

或

withStyles（）

中，添加

{index:1}

：

//钩子
const useStyles=makeStyles({
//你的风格在这里
}，{索引：1}）
//临时的
MyComponent=带有样式({
//你的风格在这里
}，{index:1}）（MyComponent）

感谢@Mordechai为您节省时间

@antax，这个解决方案甚至可以与主题一起工作。看起来你把语法搞乱了

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

---

我对材料界面的Appbar和导航抽屉有问题

发生这种情况的#1原因是类名冲突 您的代码位于生产包中

根据Material UI FAQ（），

StylesProvider

是解决这个问题的方法。它对我很有效！下面是我所做的-

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

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

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

从'@material ui/core/styles'导入{StylesProvider}；
返回(
//我剩下的代码
);

你可以在下面的网站上学习官方的例子

---

使用“@material ui/core”：“^4.11.3”，“react”：“^17.0.1”

我将无法提供任何源代码，因为整个应用程序都相当大。但是有一个与我的问题相同的示例。是什么让你认为

material ui

是问题所在？开发者控制台中是否有错误消息？我建议删除

“@material ui/styles”：“4.10.0”，

来自您的依赖项。我还建议创建最简单的应用程序版本（包括尽可能简化package.json）这仍然会重现问题。然后在您的问题中包含package.json和重现问题所需的代码。GitHub问题已经解决，因为Material UI的问题是用于错误报告和功能请求，而不是用于支持。即使它最终是一个错误，也需要支持请求，要求MUI进行工作以确定问题是在MUI中还是在您自己的项目中。您是否使用

useStyles（）

进行样式设置？@Antax，很好luck@Antex这有用吗？

const useStyles=makeStyles（{//your styles here}，{index:1}）

WORKS！！！！！添加了更多细节到answer@Antax如果这回答了你的问题，请继续奖励奖金。如果你让它通过宽限期，没有人会从中受益。你将无法获得代表。我6年来第一次登录，只是为了告诉你谢谢！！是的，它成功了。遗憾的是，我太紧张了o给予奖励

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

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