javascript - 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 Warning: React does not recognize the justifyContent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase justifycontent instead. If you accidentally passed it from a parent component, remove it from the DOM element.

我查了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>