javascript - 有没有一种方法可以使用 Material UI 组合两个图标，一个在另一个之上，作为表头中的 IconComponent

Question

我正在尝试构建一个表，其中列旁边有一个向上/向下三 Angular 形图标，而不是列名称后面的默认向上箭头来指示排序。我浏览了material-ui文档并了解到 IconComponent 属性可用于提供默认图标之外的图标，但我找不到一种方法来组合两个图标(一个在另一个顶部)并将它们传递进去作为 IconComponent 属性。

这是我尝试过的CodeSandBox .

Answer 1

您可以创建一个名为 Icon 的新组件，它使用 Flexbox 容器堆叠两个图标:

const Icon = () => {
  return (
    <span
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "Center",
        alignItems: "Center",
        marginLeft: "5px"
      }}
    >
      <KeyBoardUpIcon fontSize="12" />
      <KeyBoardDownIcon fontSize="12" />
    </span>
  );
};

并将其用作 TableSortLabel 中的 IconComponent 属性:

 <TableSortLabel
      active={true}
      direction={orderBy === headCell.id ? order : "asc"}
      IconComponent={Icon}
      onClick={createSortHandler(headCell.id)}
    >