Material-UI 如何实现列表列方向自动换行，超出最大高度生成新列

问题原因 #

首先你当前的样式不生效最直接的原因是类名不匹配：你给<List>绑定的类是classes.root，但你样式表中定义的容器类名是checklist；给<ListItem>绑定的类是classes.listItem，但样式表中定义的条目类名是item，类名对应不上自然样式不会生效。
其次你当前的样式逻辑也有问题：flexBasis: "50%"是行方向flex布局做两列排布的写法，不适用于列方向换行的场景。

无需拆分列表的实现方案 #

不需要拆分CHECKS数组，直接调整样式即可实现列满自动换列的效果，仅需要覆盖MUI组件的局部默认样式，不需要修改全局样式：

1. Flex布局实现

首先把样式表的类名和绑定的类对齐即可生效：

// 以MUI v4的makeStyles写法为例
const useStyles = makeStyles({
  root: { // 对应List绑定的classes.root
    display: "flex",
    flexDirection: "column",
    flexWrap: "wrap",
    height: "500px",
    overflowX: "auto", // 列太多时横向滚动，避免撑破对话框
    padding: "8px 0", // 覆盖MUI List默认的内边距，可按需调整
  },
  listItem: { // 对应ListItem绑定的classes.listItem
    flex: "0 0 auto", // 禁止条目被压缩高度
    height: "40px", // 开启dense属性的ListItem默认高度约为40px，可按需调整
    minWidth: "180px", // 每列最小宽度，避免文字挤在一起
    marginRight: "16px", // 列间距
  }
})

2. 更稳定的Grid方案（推荐）

如果flex布局的换行逻辑不符合预期，可以用CSS Grid实现，写法更简洁，适配性更强：

const useStyles = makeStyles({
  root: {
    display: "grid",
    gridAutoFlow: "column", // 优先按行填充，满了自动开新列
    gridTemplateRows: "repeat(auto-fill, 40px)", // 每行高度固定40px，自动填充
    maxHeight: "500px",
    gap: "0 16px", // 列间距
    padding: "8px 0",
    overflowX: "auto",
  },
  listItem: {
    height: "40px",
  }
})

注意事项 #

• 确保List的父容器（比如对话框的内容组件）没有设置overflow: hidden或者严格高度限制，允许List撑到你设置的500px高度
• 如果你用的是MUI v5的styled/sx属性写法，把上面的样式直接迁移到对应属性中即可，逻辑完全一致

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