Next.js：道具`className`不匹配。服务器：“ ...”客户端：“ ...”

Question

我在Next.js中使用Material-UI。出于某种原因，每次我访问Next.js应用程序时，都会显示以下错误消息，并且每次运行Next.js时className的目标都不同。在查找问题时，我发现它与.babelrc或next.config.js中的Webpack配置有关，但是找不到更深的东西。为什么客户端和服务器具有不同的className？

  

警告：道具className不匹配。服务器：“ MuiInputBase-root-113 ControlBar-114 SearchBar-input-110”客户端：“ MuiInputBase-root-113 SearchBar-input-110”

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "inline-dotenv",
    ["module-resolver", {
      "root": ["./src"]
    }]
  ],
  "env": {
    "test": {
      "presets": [
        ["next/babel", {
           "preset-env": {
              "modules": "commonjs"
            }
        }]
      ]
    }
  }
}

next.config.js

const { ANALYZE, ASSET_HOST } = process.env;

// for those who using CDN
const assetPrefix = ASSET_HOST || "";

const withCSS = require("@zeit/next-css");

module.exports = withCSS({
  assetPrefix,
  webpack: (config, { dev }) => {
    config.output.publicPath = `${assetPrefix}${config.output.publicPath}`;

    if (ANALYZE) {
      const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: "server",
          analyzerPort: 8888,
          openAnalyzer: true
        })
      );
    }

    config.module.rules.push({
      test: /\.scss/,
      use: [
        {
          loader: "emit-file-loader",
          options: {
            name: "dist/[path][name].[ext]"
          }
        },
        "babel-loader",
        "styled-jsx-css-loader",
        {
          loader: "sass-loader",
          options: { sourceMap: dev }
        }
      ]
    });

    return config;
  }
});