由于在Material-UI组件的客户端和服务器端渲染样式时，className被分配方式不同，导致我对客户端和服务器端渲染之间的差异感到困惑。
在第一次加载页面时，classNames被正确地分配，但是在刷新页面后，classNames不再匹配，因此组件失去了其样式。这是我在控制台上收到的错误消息：
警告：Prop
classNamedid not match. Server: "MuiFormControl-root-3 MuiFormControl-marginNormal-4 SearchBar-textField-31" Client: "MuiFormControl-root-3 MuiFormControl-marginNormal-4 SearchBar-textField-2"
我遵循了Material-UI TextField的示例文档和它们附带的Code Sandbox示例，但我似乎无法弄清楚是什么原因导致服务器和客户端的classNames之间存在差异。
当我添加带有删除 'x' 图标的Material-UI Chips时，也遇到了类似的问题。在刷新后，'x'图标呈现为1024px的巨型宽度。造成这个问题的根本原因相同，即该图标未接收到正确的样式类。
在Stack Overflow上有一些关于为什么客户端和服务器可能会以不同的方式渲染classNames的问题（例如需要升级到@Material-UI/core版本^1.0.0，在使用自定义server.js和在setState中使用Math.random），但这些都不适用于我的情况。
我不知道是否可以参考此Github讨论，但可能不行，因为他们正在使用Material-UI的beta版本。
重现最小步骤：
创建项目文件夹并启动Node服务器：
mkdir app
cd app
npm init -y
npm install react react-dom next @material-ui/core
npm run dev
编辑 package.json：
在 'scripts' 中添加："dev": "next",
app/pages/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
app/components/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 周围的红色边框消失了。
相关库：
- "react": 16.4.0
- "react-dom": 16.4.0
- "next": 6.0.3
- "@material-ui/core": 1.2.0