如何让Material-ui Grid子元素同行显示，缩放溢出时出现滚动条

首先明确 Material UI Grid 组件的规范要求：所有断点属性（xs/sm/md等）必须作用于带有item属性的Grid组件，你之前修改后的代码没有显式声明item属性，属于不符合规范的写法，仅因为组件兼容逻辑临时生效，后续版本迭代可能出现样式异常。

符合规范的两种正确写法 #

写法1：嵌套结构（常规写法，推荐） #

给作为容器的外层Grid加container属性，内部承载内容的Grid同时加item属性和断点配置，额外补充横向溢出滚动的样式，同时要求内部UserList设置弹性盒不换行：

<Grid container spacing={1}>
  <Grid 
    item 
    xs={12} 
    md={7}
    sx={{
      width: '100%',
      overflowX: 'auto'
    }}
  >
    <UserList sx={{
      display: 'flex',
      flexWrap: 'nowrap',
      gap: 8 // 对应spacing={1}的间距，可根据需求调整
    }} />
  </Grid>
</Grid>

写法2：合并结构（适用于不需要额外嵌套层级的场景） #

如果不需要额外的外层包裹，可以让同一个Grid同时作为item和container，显式声明两个属性即可，这完全符合组件设计规范：

<Grid
  item
  container
  xs={12}
  md={7}
  spacing={1}
  sx={{
    overflowX: 'auto'
  }}
>
  <UserList sx={{
    display: 'flex',
    flexWrap: 'nowrap'
  }} />
</Grid>

原代码问题说明 #

你最初的代码未生效，是因为承载UserList的Grid item默认没有设置横向溢出滚动规则，且UserList内部默认开启了弹性盒换行，内容溢出时会自动折行，不会触发滚动条。两种正确写法都补充了对应的样式规则，既符合组件API规范，也能实现预期的横向滚动效果。

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