如何修复错误“Prop `className` 不匹配。服务器：“MuiFormLabel-root-75 ....”？

Question

我使用NextJS 并尝试使用“@material-ui/core”。当我尝试使用TextFiend 时，我得到了错误：

index.js:2178 警告：道具className 不匹配。服务器： "MuiFormLabel-root-75 MuiInputLabel-root-64 MuiInputLabel-formControl-69 MuiInputLabel-animated-72" 客户端： "MuiFormLabel-root-16 MuiInputLabel-root-5 MuiInputLabel-formControl-10 MuiInputLabel-animated-13"

我的代码：

import React from 'react'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'

 export default class Footer extends React.Component {
  static formTypes = ['employer', 'employee']

  formRef = null

  state = {
    formType: Footer.formTypes[0]
  }

  render () {
    return (
      <footer className="footer">
        <div className="footer__content">
          <div className="footer__block">
            <form id="footer__form">
              <TextField type="text" name="name" label="Name"/>

              <Button type="submit">Send</Button>
              <input type="hidden" value={'employer'}/>
            </form>

          </div>

          <div className="footer__block"></div>
        </div>
      </footer>
    )
  }
}

我该怎么做才能修复它？

我的 package.json：

{
  "name": "custom-server-express",
  "version": "1.0.0",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "dependencies": {
    "@material-ui/core": "^3.6.1",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "express": "^4.16.4",
    "next": "^7.0.2",
    "node-sass": "^4.10.0",
    "normalize.css": "^8.0.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "devDependencies": {
    "babel-plugin-module-resolver": "^3.1.1"
  }
}

我没有在我的代码库的其他文件中导入 @material-ui 的任何部分。只有代码示例。

Answer 1

我遇到了这个问题，非常沮丧……但最后我解决了……

在我的解决方案中，我安装了 reactjs、next 和 material ui ...问题与 react 如何加载文件和样式服务器和客户端有关。

但重要的是要做到这一点：

您正在使用类，但我建议更改为使用这样的钩子：

import React, {useState} from 'react'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'

const Footer = (props) => {
    const formTypes = ['employer', 'employee'];
    const formRef = null;

    const [formType, setFormType] = Footer.formTypes[0];

    const myForm = (
        <footer className="footer">
            <div className="footer__content">
            <div className="footer__block">
                <form id="footer__form">
                <TextField type="text" name="name" label="Name"/>

                <Button type="submit">Send</Button>
                <input type="hidden" value={'employer'}/>
                </form>

            </div>

            <div className="footer__block"></div>
            </div>
        </footer>
    );

    return (
        {myForm}
    )
}

export default Footer;

但是实现你的代码看起来像这样......

import React from 'react'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'

export default class Footer extends React.Component {
  static formTypes = ['employer', 'employee']
  formRef = null

  state = {
    formType: Footer.formTypes[0]
  }

  render () {
    const myFormWithClasses = (
             <footer className="footer">
      <div className="footer__content">
        <div className="footer__block">
          <form id="footer__form">
            <TextField type="text" name="name" label="Name"/>

            <Button type="submit">Send</Button>
            <input type="hidden" value={'employer'}/>
          </form>

        </div>

        <div className="footer__block"></div>
      </div>
    </footer>
    )
    return (
     {myFormWithClasses}
    )
 }
}

关键是将组件的元素隔离在要渲染之前声明的变量中