在最后一个项目和第二个项目之间有意外的空格。
我的解决方法是使用普通文本而不是排版
重现步骤🕹
这是我的代码
<Grid container direction="column" spacing={2}>
<Grid item>
<Typography variant="h1">Test</Typography>
</Grid>
<Grid item>
<Grid container alignItems="center" style={{ border: '1px solid red' }}>
<Grid item xs={2}>
<Typography variant="body1">Testing Column 1</Typography>
</Grid>
<Grid item xs={4}>
<Typography variant="body1">Testing Column 1</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="body1">Testing Column 1</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>Issue Here</Grid>
</Grid>
如果你能调查一下我会很感激的。
3条答案
按热度按时间6ovsh4lw1#
在我看来,这是预期的行为。网格项正在以指定的关系2:4:6使用空间。
你能发布一个截图,你希望UI看起来像什么?
ff29svar2#
嗨@eps1lon,谢谢你的回答,这是我所期待的
0tdrvxhp3#
我不明白空格是从哪里来的,虽然你不需要
<Grid item />
〉<Grid container />
嵌套,可以用<Grid item container />
代替。@oliviertassinari这是预期行为吗?如果是,我们是否有关于此行为的文档/警告?