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

Question

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

|<------------------------------- 100% of page ------------------------------->|

|<-------------------- Fill -------------------->| |<---------- 400px ----------->|

当页面宽度缩小时：

|<-------------------- 100% of page -------------------->|

|<--------- Fill --------->| |<---------- 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 宽度，这将恰好填充空间

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

虽然我建议在这种情况下不要使用网格，但使用

Box

组件代替，因为

Grid

组件实际上意味着坚持 12 列，并且添加固定宽度会破坏它。

Answer 2

在 MUI v. 6 中，处理“填充宽度”的最佳方式已经改变，这里是一个结合了多种尺寸调整技术的示例：

<Grid2 container spacing={3}>
  <Grid2 size="auto">
    <Item>size=auto > fit content</Item>
  </Grid2>
  <Grid2 size={6}>
    <Item>size=6 > 50% of the width</Item>
  </Grid2>
  <Grid2 sx={{width: '400px'}}>
    <Item>fixed width</Item>
  </Grid2>
  <Grid2 size="grow">
    <Item>size=grow > expand to take up the remaining space</Item>
  </Grid2>
</Grid2>

更多信息请参阅文档： https://mui.com/material-ui/react-grid2/

（之前的答案可能适用于 MUI v. 4。）