如何在材质 UI 选择组件中使用 flexbox？

Question

我正在使用材质 UI 并尝试创建一个包含 2 列的下拉列表：

我的工作代码如下所示：

<Select>
  <MenuItem>item 1</MenuItem>
  <MenuItem>item 2</MenuItem>
  <MenuItem>item 3</MenuItem>
  <MenuItem>item 4</MenuItem>
</Select>

我尝试使用反应片段或 div 将项目 1 和项目 2 放入其自己的 flexbox 容器中，这样做会破坏选择下拉菜单的功能 - 当您单击选项时不会选择项目

<Select>
  <div>
    <MenuItem>item 1</MenuItem>
    <MenuItem>item 2</MenuItem>
  </div>
  <div>
    <MenuItem>item 3</MenuItem>
    <MenuItem>item 4</MenuItem>
  </div>
</Select>

我希望有两个单独的容器，因为我还想为每个容器添加滚动条。

有什么方法可以在不破坏选择功能的情况下保留容器？

Answer 1

您可以尝试将网格样式直接应用于弹出窗口的 MuiList-root 类。确保先删除包装 div。

.MuiList-root {
    display: grid;
    grid-template-columns: 1fr 1fr;
 }