Question

我正在尝试使用material-ui <Grid>嵌套网格。我阅读了文档和示例，但无法完成我想要的。

我是这样实现代码的：

                                    <Grid container spacing={4}>
                                        <Grid
                                            item
                                            container
                                            xs={12}
                                            sm={6}
                                            spacing={4}
                                        >
                                            <Field
                                                name="documentNumber"
                                                label="Document Number"
                                                as={TextInput}
                                                error={
                                                    !!(
                                                        touched.documentNumber &&
                                                        errors.documentNumber
                                                    )
                                                }
                                                helperText={
                                                    touched.documentNumber &&
                                                    errors.documentNumber
                                                }
                                                variant="outlined"
                                                fullWidth
                                            />
                                            <Field
                                                name="expirationDate"
                                                label="Expiration date"
                                                component={DatePickerField}
                                                error={
                                                    !!(
                                                        touched.expirationDate &&
                                                        errors.expirationDate
                                                    )
                                                }
                                                helperText={
                                                    touched.expirationDate &&
                                                    errors.expirationDate
                                                }
                                                inputVariant="outlined"
                                                fullWidth
                                                InputProps={{
                                                    labelWidth: 110
                                                }}
                                                InputLabelProps={{
                                                    classes: {
                                                        root: classes.label
                                                    }
                                                }}
                                                openTo="year"
                                                disablePast
                                            />
                                        </Grid>
                                        <Grid item xs={12} sm={6}>
                                            <FileUpload
                                                setDocumentSent={
                                                    setDocumentSent
                                                }
                                            />
                                        </Grid>
                                    </Grid>

结果是这个：

或桌面上的这个

：

为什么material-ui不能像嵌套的<Grid>那样在嵌套<Grid>之间添加边距？

预期结果应该是具有相同边距的均匀分布的网格。

预先感谢

编辑：我的代码有错误，我正在编辑它，但仍然没有达到预期的结果

Answer 1

根据@JoeLissner，我不应该让<Grid>是Container和Item。

所以，下面是我对任何有相同问题的人的代码：

                            <Grid container spacing={4}>
                                <Grid item xs={12} sm={6}>
                                    <Grid container spacing={4}>
                                        <Grid item xs={12}>
                                            <Field
                                                name="documentNumber"
                                                label="Document Number"
                                                as={TextInput}
                                                error={
                                                    !!(
                                                        touched.documentNumber &&
                                                        errors.documentNumber
                                                    )
                                                }
                                                helperText={
                                                    touched.documentNumber &&
                                                    errors.documentNumber
                                                }
                                                variant="outlined"
                                                fullWidth
                                            />
                                        </Grid>
                                        <Grid item xs={12}>
                                            <Field
                                                name="expirationDate"
                                                label="Expiration date"
                                                component={
                                                    DatePickerField
                                                }
                                                error={
                                                    !!(
                                                        touched.expirationDate &&
                                                        errors.expirationDate
                                                    )
                                                }
                                                helperText={
                                                    touched.expirationDate &&
                                                    errors.expirationDate
                                                }
                                                inputVariant="outlined"
                                                fullWidth
                                                InputProps={{
                                                    labelWidth: 110
                                                }}
                                                InputLabelProps={{
                                                    classes: {
                                                        root:
                                                            classes.label
                                                    }
                                                }}
                                                openTo="year"
                                                disablePast
                                            />
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} sm={6}>
                                    <FileUpload
                                        setDocumentSent={
                                            setDocumentSent
                                        }
                                    />
                                </Grid>
                            </Grid>

这是工作沙箱：https://codesandbox.io/s/adoring-dirac-co5ep

材质用户界面嵌套网格边距

1 个答案: