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如何加载文件和样式服务器以及客户端。

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

您正在使用clase，但我建议您更改为使用钩子：

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}
    )
 }
}

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

1 个答案:

键将要呈现的变量中的组件元素隔离开