Question

这是一个很难解释的问题。我正在使用一个相当基本的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'生成环境

老实说，我不知道为什么会这样做。在另一个项目中，我使用react-create-app作为基础生产material-ui@1.0.0-beta.22，这一切都很好。使用beta 22也无法解决问题。也没有像在react-create-app中那样降级到webpack 3。我似乎无法找到可能导致这一结果的任何重大差异。

如果有人能够对可能的解决方案有所了解，我们将非常感激。

Answer 1

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

对我来说，现在已经修好了。

Answer 2

要使用的一种解决方法

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

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

@kof comment on github on the similiar issue

Answer 3

我有一个类似的问题。这是由于在开发和生产环境中样式表的顺序不同引起的，导致了不必要的覆盖。在开发环境中，由makeStyles()创建的所有样式表都在所有MUI样式表之后注入，但在生产中它们是混合的。

解决方案：

为所有{ index: 1 }调用添加一个选项：makeStyles()，以便将那些工作表放置在索引为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之后）

生产环境打破了材料风格

3 个答案: