Material-UI：如何对列表进行列换行

Question

我目前正在使用 Material-UI 来呈现复选框列表，就像在 this example 中所做的那样。

问题是我的列表中有大约 30 个项目，我将它们全部放入一个对话框中。我希望我的复选框列表项填充到最大高度（即 500 像素），然后 其余的列表项应该换成一个新列，填充对话框的水平空间 .

我正在寻找这样的东西：(other stackoverflow post that's asking for something similar)

这是我的代码，直接从 MUI 参考文档中复制：

<List className={classes.root}>
  {CHECKS.map((value: string) => {                     // (CHECKS = array of strings)
    const labelId = `checkbox-list-label-${value}`;

    return (
      <ListItem
        key={value}
        role={undefined}
        dense
        button
        onClick={handleToggle(value)}
        className={classes.listItem}
      >
        <ListItemIcon>
          <Checkbox
            edge="start"
            checked={checked.indexOf(value) !== -1}
            tabIndex={-1}
            disableRipple
            inputProps={{ "aria-labelledby": labelId }}
          />
        </ListItemIcon>
        <ListItemText id={labelId} primary={value} />
      </ListItem>
    );
  })}
</List>

但是我的“root”和“listItem”类并没有改变任何东西。这是我的（无用的）CSS：

checklist: {
  display: "flex",
  flexWrap: "wrap",
  flexDirection: "column",
  height: "500px",
},
item: {
  flexBasis: "50%",     // Something I saw online
},

我需要重写一些标准的 MUI 样式吗？

（我真的不想将我的 CHECKS 列表拆分为 3 个单独的列表和 flexbox，然后将所有内容包装在一个大的 flexbox 中，等等）

Answer 1

您可以使用column wrap，并确保将overflow 设置为auto 以显示水平滚动条：

const useStyles = makeStyles({
  container: {
    display: "flex",
    flexFlow: "column wrap",
    gap: "0 30px",
    backgroundColor: "pink",
    height: 300, // set the height limit to your liking
    overflow: "auto"
  },
  item: {
    width: "auto"
  }
});

<div className={classes.container}>
  {CHECKS.map((value: string) => {
    return (
      <ListItem key={value} className={classes.item}>
        <ListItemIcon>
          <Checkbox edge="start" disableRipple />
        </ListItemIcon>
        <ListItemText primary={value} />
      </ListItem>
    );
  })}
</div>

现场演示