由于 classNames 的分配方式不同,我在处理 Material-UI 组件中客户端和服务器端样式呈现之间的差异时遇到了困难。
classNames 在第一次加载页面时被正确分配,但在刷新页面后,classNames 不再匹配,因此组件失去了它的样式。这是我在控制台上收到的错误消息:
警告:props
className
不匹配。服务器:“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 周围的红色边框消失了。
相关库:
- “react”:16.4.0
- “react域”:16.4.0
- “下一个”:6.0.3
- “@material-ui/core”:1.2.0