React 无法识别 DOM 元素上的 `justifyContent` 属性答案

【问题标题】：React does not recognize the `justifyContent` prop on a DOM elementReact 无法识别 DOM 元素上的 `justifyContent` 属性
【发布时间】：2021-12-20 01:48:07
【问题描述】：

const useStyles = makeStyles((theme) => ({
root:{
    padding: 0,
    textAlign: 'left',
    flexDirection: '100vh',
},
}));
    

return (
    <Container>
    <div className={classes.root}>
    <Grid container spacing={2} className={classes.Grid} justifyContent="center">
        <Grid item xs={12}>
            <RadioGroup row  aria-label="type" name="name"  className={classes.weightradio} defaultValue={"1"} value={weightRadio} onChange={handleWeightRadio}> 
                <FormControlLabel value="1"  control={<Radio />} label="1kg" />
                <FormControlLabel value="2"  control={<Radio />} label="2kg" />
                <FormControlLabel value="others"  control={<Radio />} label=">3kg" />
            </RadioGroup>
        </Grid>
        .....
   </Gid>

日志给我看---

index.js:1 警告：React 无法识别 justifyContent 属性在 DOM 元素上。如果您故意希望它在 DOM 中显示为自定义属性，将其拼写为小写 justifycontent。如果您不小心从父组件传递了它，将其从 DOM 元素。

我查看了MUI 4.0的文档，支持justifyContent，问题出在哪里。

【问题讨论】：

您能否在代码和框中提供它的工作示例
你试过用justify prop代替吗？似乎在 v4.x.x 的某个时间点，它被重命名为 justifyContent，所以也许您使用的是旧版本。
@fgkolf 谢谢你的帮助，你是对的，这是合理的。

标签： javascript reactjs material-ui

【解决方案1】：

版本不同。并非所有 4.* 版本都支持 justifyContent 可能早于 4.12 的版本仅运行 justify： https://github.com/mui-org/material-ui/pull/21845

对于 4.11.4 肯定是这样

【讨论】：

【解决方案2】：

好的，我知道了。

justify 代替 justifyContent ，且不应设置为 Grid root ，正确代码如下，

        <Grid container spacing={2} className={classes.Grid}>
        <Grid item xs={12} container justify="center">   //changed here 
            <RadioGroup row  aria-label="type" name="name"  className={classes.weightradio} defaultValue={"1"} value={weightRadio} onChange={handleWeightRadio}> 
                <FormControlLabel value="1"  control={<Radio />} label="1kg" />
                <FormControlLabel value="2"  control={<Radio />} label="2kg" />
                <FormControlLabel value="others"  control={<Radio />} label=">3kg" />
            </RadioGroup>
        </Grid>

【讨论】：