React报错不识别DOM元素上justifyContent属性，MUI4支持该属性求排查原因

核心原因 #

你遇到的警告是MUI v4和v5的Grid组件API命名差异导致的：

• MUI v4的Grid容器水平对齐属性为justify，而非justifyContent
• justifyContent是MUI v5对Grid组件更新后的命名，v4版本的Grid无法识别该属性，会直接将其透传给底层的原生DOM元素，React检测到原生DOM不存在该属性就会抛出对应警告。

其他代码错误 #

你提供的代码里还存在2处会导致运行异常的问题：

• Grid闭合标签拼写错误：</Gid>需改为</Grid>
• useStyles中flexDirection属性值非法：100vh是长度单位，flexDirection合法取值为row/row-reverse/column/column-reverse，如果需要实现容器占满视口高度的需求，可以新增height: '100vh'属性。

修正后的代码示例 #

const useStyles = makeStyles((theme) => ({
  root:{
    padding: 0,
    textAlign: 'left',
    // 修正flexDirection取值，如需占满高度新增height属性
    flexDirection: 'column',
    height: '100vh'
  },
}));
    

return (
    <Container>
    <div className={classes.root}>
    {/* 将justifyContent改为justify */}
    <Grid container spacing={2} className={classes.Grid} justify="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>
        .....
    </Grid>
    </div>
    </Container>

内容的提问来源于stack exchange，提问作者will