Mui 网格项目固定宽度项目位于填充宽度项目旁边

Question

我目前正在使用MUI Grid（但我愿意接受替代解决方案），我想要两个并排的组件：最右边的组件占据 400px 的宽度，左边的组件占据其余的宽度。

|<------------------------------------------- 页面 100% ------------- ------------------>|

|<-------------------- 填充 -------------------->| |<---------- 400 像素 ---------->|

当页面宽度缩小时：

|<-------------------- 页面 100% -------------------->|

|<--------- 填充 --------->| |<---------- 400 像素 ---------->|

我的代码目前正在拉伸leftComponent页面的 100% 并将rightComponent其推到其下方。

<Grid container spacing={3}>
    <Grid item xs={12} >
        <leftComponent />
    </Grid>
    <Grid item style={{width: "400px"}}>
        <rightComponent />
    </Grid>
</Grid>

Answer 1

您所需要做的就是删除您的值的数字xs。这样做只是告诉该项目具有 auto 宽度，这将恰好填充空间

<Grid container spacing={3}>
    <Grid item xs>
        <leftComponent />
    </Grid>
    <Grid item style={{width: "400px"}}>
        <rightComponent />
    </Grid>
</Grid>

虽然我建议在这种情况下不要使用网格，而是使用Box组件，因为Grid组件实际上是要坚持 12 列，并且添加固定宽度会破坏它。