Material-ui嵌套网格边距 [英] Material-ui nested grids margins
问题描述
我正在尝试使用 material-ui < Grid> 嵌套网格.我阅读了文档和示例，但无法完成我想要的.
I'm trying to nest a grid using the material-ui <Grid>. I read the documentation and the examples, but can't accomplish what I want.
我是通过以下方式实现代码的:
I implemented my code this way:
<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>所做的那样?
Why material-ui doesn't add a margin between the nested <Grid> like it does for the two outter <Grid>?
预期结果应该是具有相同边距的等距分布网格.
The expected result should be equally distributed grids, with same margins.
预先感谢
我的代码有错误，我正在编辑它，但仍然没有达到预期的结果
There was an error on my code, I'm editing it but I'm still not achieving the expected result
推荐答案
根据@JoeLissner，我不应该将< Grid> 用作 Container 一个 Item .
According to @JoeLissner, I shouldn't have a <Grid> being a Container and an Item.
所以，下面是我对任何有相同问题的人的代码:
So, below is my code to whoever has the same question:
<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
这篇关于Material-ui嵌套网格边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
