Material-UI 在生产模式下有不同的风格？

Question

我正在编写一个使用服务器端渲染的 React 应用程序。我正在按照此处的说明设置文件。

这是我的.babelrc配置文件

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": { "version": 3, "proposals": true },
        "targets": {
          "browsers": "> 1%, not ie 11, not op_mini all",
          "node": 13
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
    [
      "import",
      {
        "libraryName": "@material-ui/icons",
        "libraryDirectory": "utils", // default: lib
        "camel2DashComponentName": false // default: true
      },
      "@material-ui/icons"
    ]
  ]
}

这是webpack.config.js文件

const path = require("path");

const nodeExternals = require("webpack-node-externals");

const commonConfig = {
  devtool: "source-map",
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }]
  },
  resolve: {
    alias: {
      "@material-ui/core": "@material-ui/core/es"
    }
  }
};

module.exports = [
  {
    ...commonConfig,
    entry: "./src/client",
    output: {
      path: path.resolve(__dirname, "public")
    }
  },
  {
    ...commonConfig,
    target: "node",
    entry: "./src/server",
    output: {
      path: path.resolve(__dirname, "server")
    },
    externals: [nodeExternals()]
  }
];

（这里是CodeSandBox 中的完整代码，这里是Github如果你想尝试）

出现的问题是当我捆绑文件时，在开发模式下，一切正常。但是当我尝试生产模式时，CSS 部分开始表现得很奇怪。当文件第一次从localhost，它的样式是正确的（这会在很短的时间内发生），然后样式会出错，因为缺少某些样式。

当我尝试调查时，我发现所有缺少的样式都是我用makeStyles(). 所有内置样式都可以正常工作。我试图删除这篇文章中的所有resolve属性webpack.config.js，但它不起作用。无论我如何尝试更改该属性，都没有任何反应。

所以现在我发现可以使应用程序在生产版本中工作的唯一方法是删除删除样式文件的代码（您可以在client.js文件末尾找到该部分），但我不确定结果是什么这样做。

所以我的问题是：

1. 你有什么建议修复这个应用程序？

2. 为什么开发和生产两种模式会有如此大的差异？我知道生产模式将包括一些缩小、摇树等，除了缩小之外，开发中还有大部分。那么为什么会有区别呢？

   编辑：我找到了针对此错误的两个可能且可行的修复程序：一个是停止删除这些 CSS 文件（我在client.js文件中编写的代码）；另一种是删除nodeExternal()插件webpack.config.js并捆绑服务器文件的所有内容。你怎么认为 ？

Answer 1

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

解决方案：

添加一个选项：{ index: 1 }到所有makeStyles()调用，以便将这些工作表放在索引为 0 的 MUI 工作表之后（默认情况下）。这个可选参数直接传递给底层 JSSjss.createStyleSheet()并规定注入顺序：

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

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