Material UI GridList 下拉菜单太宽答案

【问题标题】：Material UI GridList drop down is too wideMaterial UI GridList 下拉菜单太宽
【发布时间】：2021-01-25 01:32:59
【问题描述】：

我正在尝试在 Material UI 中创建一个网格形状的菜单/下拉菜单。我在文档中看到的下拉菜单是单列或单行。我使用包含GridList 的菜单组件对此进行了尝试，这几乎对我有用，但是网格太宽并且列之间的空间太大。我试过使用 GridListItem 和 Grid 容器和 GridItem 但我最终遇到了同样的问题。

   <Menu
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        transformOrigin={{ vertical: "top", horizontal: "left" }}
        TransitionComponent={Fade}
      >
        <GridList cellHeight={48} cols={2}>
          <Button onClick={(e) => handleClose(LayoutIcons.L_1x1)}>
            {GetGroupIcon(LayoutIcons.L_1x1)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_2x2)}>
            {GetGroupIcon(LayoutIcons.L_2x2)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
        </GridList>
      </Menu>

CodeSandbox for sample grid drop down

在深入研究之后，我发现网格的宽度是所有元素宽度的总和，因为它使用 flex 作为显示（在我的示例代码中它是 6，但我的解决方案需要任意数量元素的通用网格和列）。然后网格根据列数设置每个元素的宽度。我有 2 列，所以每个元素的宽度都设置为 50%。这提供了每行 2 个元素，但使每个元素非常宽。

我正在寻找一种 Material UI 解决方案来收紧元素宽度，以便在我的示例代码中将列数设置为 6 时，每个项目都相距很远。我可以使用 GridList 或 Grid 或完全不同的方法进行调整，只要它使用 Material UI 组件即可。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

使用块元素，例如div。关闭另一个块元素中的每一行。如果您需要更多间距，请添加边距

<div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_1x1)}>
      {GetGroupIcon(LayoutIcons.L_1x1)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_2x2)}>
      {GetGroupIcon(LayoutIcons.L_2x2)}
    </Button>
  </div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
  </div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
  </div>
</div>

【讨论】：