Reactjs 生产环境破坏了材质ui样式

这是一个很难解释的问题。我正在使用一个相当基本的webpack react+redux+路由器设置。在这个设置中，我只使用材料-ui@1.0.0-beta.43作为用户界面包。在侧面还有一些额外的scss样式。所有包裹都是最新的

在开发环境中，这一切都按预期工作。然而，当它在NODE_ENV设置为

production

的情况下编译时，样式变得非常奇怪。我已经检查了生产和开发之间的网页配置差异，但这并没有解决任何问题。因此，在一个包的某个地方，环境似乎在某种程度上破坏了东西

正常发育

使用根目录中的“物料ui”导入{Grid}的生产环境

使用

从根目录中的“物料ui/es/Grid/Grid”导入网格的生产环境


我真的不知道为什么它会这样。在另一个项目中，我有材料-ui@1.0.0-beta.22以react create应用程序为基础进行生产，运行良好。使用beta 22也不能解决问题。也不会降级到react create应用程序中使用的网页3。我似乎找不到任何可能导致这一结果的重大差异

如果有人能提供一些可能的解决方案，我将不胜感激。
在我发布这个问题之前，我尝试了5个小时，之后1个小时，我终于找到了原因。IntelliJ auto导入了一些
材料ui/E
组件，以及那些设法完全破坏生产中所有样式的组件。问题可能在于混合使用两个导入位置或仅使用
/es
导入

对我来说，它现在已在生产中得到修复。
一个解决方案

import {createGenerateClassName} from 'react-jss'
const generateClassName = createGenerateClassName()

<JssProvider generateClassName={generateClassName}>
  <App1 />
</JssProvider>

从'react jss'导入{createGenerateClassName}
const generateClassName=createGenerateClassName（）
我也有类似的问题。这是由dev和prod环境中样式表的顺序不同引起的，导致了不必要的覆盖。在dev env中，
makeStyles（）
创建的所有样式表都是在所有MUI样式表之后注入的，但在生产中它们是混合的

解决方案：

为所有
makeStyles（）
调用添加一个选项：
{index:1}
，以便将这些图纸放置在索引为0（默认情况下）的MUI图纸之后。此可选参数直接传递给基础JSS的
JSS.createStyleSheet（）
，并指定注入顺序：

const useStyles = makeStyles(
  (...),         //  styles
  { index: 1 },  //  optional argument for JSS, to set position after MUI stylesheets
)

（之后：）
浏览器控制台中是否有任何错误消息？感谢您与我一起思考！我已经回答了自己的问题，但我终于幸运地找到了问题。谢谢！想知道是否有一种方法可以更早地标记这些问题。在我到达这里之前花了我几个小时，我几乎不知道为什么它不起作用。我想没有一个真正有效的方法用语言来解释这种视觉问题。对我来说，在写问题的同时，尝试找到解决方案也是一个挑战。也许你有一些关键字可以帮助我更容易找到它？不是真的，这对我来说非常奇怪和困惑，因为这只是我创建生产构建时的一个问题。我的很多UI元素出现了，然后似乎从屏幕左侧消失了。那可能只是我的经历。在这方面，我还没有足够的能力来完全理解造成这一问题的原因。#Mikrowave我很难理解您的解决方案，以及如何在我的生产版本中修复它，您能再解释一下吗。感谢you@AbundanceOshianor您正在混合导入样式。例如，使用
从“物料ui/TextField”导入文本字段
和
从“物料ui/es/TextField”导入文本字段
。注意最后一个是如何从编译版本导入的。这就是造成问题的原因。因此，请确保不要从
材质ui/es
导入任何内容。因此，您的意思是，当将普通导入与
/es
导入组合时，此问题的根源是由于类名中存在冲突？这是如何解释仅在生产中的移位和未成形布局的？是的，我有一个类似的问题，在本地它都是好的，但生产版本是混乱的。这和添加_document.tsx到项目解决了我的问题。非常感谢。