有没有一种方法，我可以结合两个图标，一个在另一个之上，作为IconComponent在表标题使用材料用户界面
有没有一种方法，我可以结合两个图标，一个在另一个之上，作为IconComponent在表标题使用材料用户界面
提问于 2021-12-10 04:02:38
我试图构建一个表，在该表中，列旁边有一个上下三角形图标，而不是列名后面的默认向上箭头，以指示排序。我查看了资料-ui文档，并读到IconComponent支柱可以用于提供一个图标，而不是默认的图标，但是我无法找到将两个图标组合在一起的方法，一个图标在另一个图标上，然后将它们作为IconComponent支柱传递。
这是我在CodeSandBox上尝试过的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-10 08:27:06
您可以创建一个名为Icon的新组件，它使用一个柔性盒容器来堆叠这两个图标：
const Icon = () => {
return (
<span
style={{
display: "flex",
flexDirection: "column",
justifyContent: "Center",
alignItems: "Center",
marginLeft: "5px"
}}
>
<KeyBoardUpIcon fontSize="12" />
<KeyBoardDownIcon fontSize="12" />
</span>
);
};并在IconComponent s中使用它作为TableSortLabel的支柱：
<TableSortLabel
active={true}
direction={orderBy === headCell.id ? order : "asc"}
IconComponent={Icon}
onClick={createSortHandler(headCell.id)}
>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70299629
复制相关文章
相似问题
腾讯云开发者
