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

Question

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

是支持的，问题出在哪里

Answer 1

好的，我得到答案了。

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>

Answer 2

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

对于 4.11.4 来说绝对是这样

Answer 3

<div style={{ justifyContent: 'center' }}>...</div>