Material UI Grid如何设置固定宽度列 剩余宽度由其余两列均分

Material UI Grid 底层基于Flex布局实现，你可以直接使用Grid组件原生支持的flex相关属性实现需求，无需手动写calc计算逻辑：

• 给固定宽度的item2设置flexShrink: 0，避免容器宽度不足时item2被挤压，保证宽度始终为100px
• 给item1和item3设置flexGrow: 1，二者会按1:1的比例平分item2占完之后的剩余容器宽度

修改后的代码如下：

<Grid container>
  <Grid item flexGrow={1}>
    item 1
  </Grid>
  <Grid item style={{ width: "100px", flexShrink: 0 }}>
    item 2
  </Grid>
  <Grid item flexGrow={1}>
    item 3
  </Grid>
</Grid>

如果使用MUI v5及以上版本，也可以用内置的sx属性编写样式，用法和上面的style属性完全一致。

内容的提问来源于stack exchange，提问作者Reis