javascript - Material-UI 在生产模式下有不同的样式结果？

Question

我正在编写一个使用服务器端渲染的 React 应用程序。我正在关注 instruction在这里建立一个文件。

这是我的.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 中的完整 code，如果你想尝试，这里是 Github)

出现的问题是当我捆绑文件时，在开发模式下，一切正常。但是当我尝试生产模式时，CSS 部分开始表现得很奇怪。首次从 localhost 加载文件时，它的样式正确(这会在很短的时间内发生)，然后由于缺少某些样式而导致样式出错。

当我试图调查时，我发现所有缺少的样式都是我用 makeStyles() 写的部分。 .所有内置样式都可以正常工作。
我试图删除所有 resolve位于 webpack.config.js 的属性(property)关注此 post ，但它不起作用。无论我尝试更改该属性，都没有任何 react 。

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

所以我的问题是:

您可以建议该应用程序的修复方法是什么？

为什么开发和生产两种模式之间存在如此大的差异？我知道生产模式会包括一些缩小、摇树等，而开发中除了缩小之外，大部分都是这样的。那么为什么会有区别呢？

编辑 : 对于这个错误，我发现了两个可能且可行的修复:一个是停止删除那些 CSS 文件(我在 client.js 文件中编写的代码)；另一种是删除nodeExternal() webpack.config.js 中的插件并捆绑服务器文件的所有内容。你怎么看 ？

Answer 1

我有一个类似的问题，虽然没有服务器端渲染。它是由 引起的样式表的不同顺序 在开发和生产环境中，导致不必要的覆盖。在开发环境中，由 makeStyles() 创建的所有样式表在所有 MUI 样式表之后注入(inject)，但在生产中它们是混合的。
解决方案:
添加选项:{ index: 1 }致所有 makeStyles()调用，以便将这些工作表放在索引为 0 的 MUI 工作表之后(默认情况下)。此可选参数直接传递给底层 JSS 的 jss.createStyleSheet()并规定注入(inject)顺序:

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

(之后: https://stackoverflow.com/a/62646041/624597)