0
299
Views¿Hay alguna manera de combinar dos íconos, uno encima del otro, como IconComponent en el encabezado de la tabla usando Material UI?
Estoy tratando de construir una tabla donde tengo un ícono de triángulo arriba/abajo al lado de la columna en lugar de la flecha hacia arriba predeterminada después del nombre de la columna para indicar la clasificación. Revisé los documentos de material-ui y leí que el accesorio IconComponent se puede usar para dar un ícono que no sea el predeterminado, pero no pude encontrar una manera de combinar dos íconos, uno encima del otro, y pasarlos como accesorio IconComponent.
Esto es lo que probé en CodeSandBox .
·
Santiago Gelvez
1 answers
Answer question0
Puede crear un nuevo componente llamado Icon , que apila los dos íconos usando un contenedor flexbox:
const Icon = () => { return ( <span style={{ display: "flex", flexDirection: "column", justifyContent: "Center", alignItems: "Center", marginLeft: "5px" }} > <KeyBoardUpIcon fontSize="12" /> <KeyBoardDownIcon fontSize="12" /> </span> ); }; Y utilícelo como accesorio IconComponent en TableSortLabel s:
<TableSortLabel active={true} direction={orderBy === headCell.id ? order : "asc"} IconComponent={Icon} onClick={createSortHandler(headCell.id)} > 
·
Santiago Gelvez
Report
Answer question