Mui Grid Item Fixed Width Item Beside Fill Width Item

Question

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

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

|<--------------------填充-------------------->| |<------------ 400px ------------>|

页面宽度缩小时：

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

|<--------填写-------->| |<------------ 400px ------------>|

我的代码目前正在将 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 ，它只会填充 space

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

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

Mui Grid Item Fixed Width Item Beside Fill Width Item

Mui Grid Item Fixed Width Item Beside Fill Width Item

grid

reactjs

material-ui