reactjs - Mui Grid Item Fixed Width Item Beside Fill Width Item

Question

我目前正在使用 MUI Grid(但我对替代解决方案持开放态度)并且我想要并排放置两个组件:最右边的组件占 400px宽度和左侧组件占据其余部分。

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

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

当页面宽度缩小时:

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

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

我的代码目前正在将 leftComponent 拉伸(stretch)到页面的 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 列并添加一个固定的宽度会破坏它。