生产环境打破material-ui样式答案

【问题标题】：Production environment breaks material-ui styling生产环境打破material-ui样式
【发布时间】：2018-10-07 05:47:51
【问题描述】：

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

在开发环境中，这一切都按预期工作。然而，当它在 NODE_ENV 设置为production 的情况下编译时，样式变得非常奇怪。我检查了生产和开发之间的 webpack 配置差异，但这并没有解决任何问题。因此，在包中的某个地方，环境似乎会以某种方式破坏事物。

正常发育

在根目录下使用import { Grid } from 'material-ui' 的生产环境

在根目录下使用import Grid from 'material-ui/es/Grid/Grid' 的生产环境

老实说，我真的不知道它为什么会这样。在另一个项目中，我有 material-ui@1.0.0-beta.22 在生产中，以 react-create-app 为基础，一切正常。使用 beta 22 也不能解决问题。降级到 react-create-app 中使用的 webpack 3 也不行。我似乎找不到任何可能导致此结果的主要差异。

如果有人能阐明可能的解决方案，我将不胜感激。

【问题讨论】：

浏览器控制台有错误提示吗？
感谢您与我一起思考！我已经回答了自己的问题，因为我终于幸运地找到了问题。

标签： reactjs webpack material-ui

【解决方案1】：

在我发布此问题之前和之后 1 小时尝试了 5 小时，我终于找到了原因。 IntelliJ auto 导入了包的一些material-ui/es 部分，这些部分设法完全打破了生产中的所有样式。混合两个导入位置或仅使用 /es 导入可能是问题所在。

对我来说，它现在已在生产中修复。

【讨论】：

谢谢！想知道是否有办法更早地标记这些问题。我花了几个小时才到达这里，但几乎不知道为什么它不起作用。
我想没有一种方法可以有效地用文字解释这些视觉问题。尝试找到解决方案以及编写问题对我来说也是一个挑战。也许您有一些关键字可以帮助使其更容易找到？
不是真的，这对我来说非常奇怪和困惑，因为这只是我创建生产版本时的问题。我的很多 UI 元素出现了，然后似乎离开了屏幕左侧。不过，这可能只是我的经验。我在这方面的能力还不够，无法完全理解是什么原因造成的。
#Mikrowave 我很难理解您的解决方案以及如何在我的生产版本上修复它，您能否再解释一下。谢谢
@AbundanceOshian 或者您正在混合导入样式。例如使用import TextField from 'material-ui/TextField' 和import TextField from 'material-ui/es/TextField'。注意最后一个是如何从/es 编译版本导入的。这就是造成问题的原因。因此，请确保不要从 material-ui/es 导入任何内容。

【解决方案2】：

一种解决方法，

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

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

@kof comment on github on the similiar issue

【讨论】：

所以你的意思是这个问题的根源是在将普通导入与/es 导入组合时类名中的一些冲突？这如何解释仅在生产中发生偏移和错误形成的布局？
是的，我也遇到过类似的问题，在本地一切都很好，但生产版本搞砸了。

【解决方案3】：

我遇到了类似的问题。这是由开发和生产环境中样式表的不同顺序引起的，导致不必要的覆盖。在开发环境中，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
)

（之后：https://stackoverflow.com/a/62646041/624597）

【讨论】：

这并将 _document.tsx 添加到项目中为我解决了这个问题。谢谢。