React + Material-UI - 警告:Prop className 不匹配

IT技术 node.js reactjs material-ui nextjs
2021-04-18 18:41:40

由于 classNames 的分配方式不同,我在处理 Material-UI 组件中客户端和服务器端样式呈现之间的差异时遇到了困难。

classNames 在第一次加载页面时被正确分配,但在刷新页面后,classNames 不再匹配,因此组件失去了它的样式。这是我在控制台上收到的错误消息:

警告:propsclassName不匹配。服务器:“MuiFormControl-root-3 MuiFormControl-marginNormal-4 SearchBar-textField-31 ” 客户端:“MuiFormControl-root-3 MuiFormControl-marginNormal-4 SearchBar-textField-2

我遵循了 Material-UI TextField示例文档及其随附的Code Sandbox 示例,但我似乎无法弄清楚是什么导致了服务器和客户端 classNames 之间的差异。

在添加带有删除“x”图标的 Material-UI 芯片时,我遇到了类似的问题。刷新后以 1024 像素的巨大宽度呈现的“x”图标。相同的潜在问题是该图标没有收到正确的样式类。

Stack Overflow 上有几个问题解决了为什么客户端和服务器可能会以不同的方式呈现 classNames(例如,需要升级到 @Material-UI/core 版本 ^1.0.0,使用自定义 server.js,并在 setState 中使用 Math.random ),但这些都不适用于我的情况。

我不知道这个 Github 讨论是否会有所帮助,但可能不会,因为他们使用的是 Material-UI 的测试版。

重现的最小步骤:

创建项目文件夹并启动节点服务器:

mkdir app
cd app
npm init -y
npm install react react-dom next @material-ui/core
npm run dev

编辑 package.json:

添加到“脚本”: "dev": "next",

应用程序/页面/index.jsx:

import Head from "next/head"
import CssBaseline from "@material-ui/core/CssBaseline"
import SearchBar from "../components/SearchBar"

const Index = () => (
  <React.Fragment>
    <Head>
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
      />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />
    </Head>
    <CssBaseline />
    <SearchBar />
  </React.Fragment>
)

export default Index

应用程序/组件/SearchBar.jsx:

import PropTypes from "prop-types"
import { withStyles } from "@material-ui/core/styles"
import TextField from "@material-ui/core/TextField"

const styles = (theme) => ({
  container: {
    display: "flex",
    flexWrap: "wrap",
  },
  textField: {
    margin: theme.spacing.unit / 2,
    width: 200,
    border: "2px solid red",
  },
})

class SearchBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: "" }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    this.setState({ value: event.target.value })
  }

  handleSubmit(event) {
    event.preventDefault()
  }

  render() {
    const { classes } = this.props
    return (
      <form
        className={classes.container}
        noValidate
        autoComplete="off"
        onSubmit={this.handleSubmit}
      >
        <TextField
          id="search"
          label="Search"
          type="search"
          placeholder="Search..."
          className={classes.textField}
          value={this.state.value}
          onChange={this.handleChange}
          margin="normal"
        />
      </form>
    )
  }
}

SearchBar.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(SearchBar)

在浏览器中访问页面localhost:3000并查看:

TextField 组件周围的红色边框

刷新浏览器,看到这个:

TextField 组件的样式消失了

请注意,TextField 周围的红色边框消失了。

相关库:

  • “react”:16.4.0
  • “react域”:16.4.0
  • “下一个”:6.0.3
  • “@material-ui/core”:1.2.0
6个回答

问题在于 Next.js 中的 SSR 渲染,它在渲染页面之前生成样式片段。

使用 Material UI 和 Next.js(作者正在使用),添加一个名为的文件_document.js解决了问题。

调整后_document.js如此处建议):

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/styles'; // works with @material-ui/core/styles, if you prefer to use it.
import theme from '../src/theme'; // Adjust here as well

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* Not exactly required, but this is the PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};
感谢您将问题的解决方案直接发布到此线程。我自己还没有测试过,但乍一看,它看起来与我最终采用的解决方案相同。
2021-05-22 18:41:40
数以千计的感谢,它完成了这项工作。
2021-06-08 18:41:40
你是救世主
2021-06-10 18:41:40
这对我有用。非常感谢您发布此信息。:)
2021-06-21 18:41:40
这应该是 2021 年公认的答案
2021-06-21 18:41:40

此问题与使用包含 ID 的动态类名的 MUI 相关。来自服务器端呈现的 CSS 的 ID 与客户端 CSS 的 ID 不同,因此会出现不匹配错误。一个好的开始是阅读MUI SSR 文档

如果你对 nextjs 有这个问题(就像我一样)按照 MUI 团队提供的例子,可以在这里找到:material-ui/examples/nextjs

最重要的部分在“examples/nextjs/pages/_app.js”中:

componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }

相关票证可以在这里找到:mui-org/material-ui/issues/15073

它的作用是删除服务器端呈现的样式表并将其替换为新的客户端呈现的样式表

对我来说,这些示例还需要 _document.js。
2021-06-01 18:41:40

问题是服务器端生成类名,但样式表不会自动包含在 HTML 中。您需要显式提取 CSS 并将其附加到服务器端呈现组件的 UI。整个过程在这里解释:https : //material-ui.com/guides/server-rendering/

嗨,我遵循与文档中描述的完全相同的方法。但是样式与服务器和客户端不同,并且它们没有正确对齐。控制台读取到 className 不匹配。任何解决问题的指针都会非常有帮助。谢谢。
2021-05-26 18:41:40
我同意你的回答。对于那些喜欢视频解释的人。你可以看看下面这个视频 https://www.youtube.com/watch?v=mtGQe7rTHn8
2021-05-26 18:41:40
请注意,对于阅读上述 chrisweb 评论的人“对于 nextjs,请参阅下面的答案”,我已经接受了这个答案,所以现在它应该读为“上面”。
2021-05-28 18:41:40
@lekhamani 没有更多信息很难说可能是什么问题。你能补充更多细节吗?
2021-06-13 18:41:40
对于nextjs,请看下面我的回答
2021-06-15 18:41:40

我在使用 Next.js 和样式组件时遇到了同样的问题,使用 Babel 进行了转译。实际上,客户端和服务器端的类名是不同的。

修复它在你的 .babelrc 中写这个:

{
"presets": ["next/babel"],
"plugins": [
    [
      "styled-components",
      { "ssr": true, "displayName": true, "preprocess": false }
    ]
]

}

做到了。你拯救了这一天。
2021-05-27 18:41:40
我没有样式组件
2021-05-28 18:41:40
.babelrc 文件在哪里?
2021-06-02 18:41:40
@JatinHemnani 如果您没有 .babelrc,只需在项目的根文件夹中创建它。这是一个例子
2021-06-02 18:41:40
@JamieHutber我也喜欢这样,但我想知道为什么这种方式有效
2021-06-04 18:41:40

这里还有另一个重要的单独问题:Material UI V4 is not React Strict Mode compatible随着Emotion 风格引擎采用,严格的模式兼容性将用于第 5 版

在此之前,请确保禁用 React Strict 模式。如果您使用Next.js,这是默认打开的,如果你已经使用创建您的应用程序create-next-app

// next.config.js
module.exports = {
  reactStrictMode: false, // or remove this line completely
}