I'm working on a table with sorting functionality similar to the mui website's "sorting and selecting" feature: https://material-ui.com/components/tables/
My goal is to modify the color of the header text that is selected for sorting. I attempted the following code snippet, but was only successful in changing the background-color (simplified example):
const useStyles = makeStyles({
active: {
color: "yellow",
backgroundColor: "yellow",
},
});
function Example() {
const classes = useStyles();
// functions for sorting etc. here left out
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<StyledTableCell>
<TableSortLabel
active={valueToOrderBy === "column"}
direction={
valueToOrderBy == "column" ? orderDirection : "asc"
}
onClick={createSortHandler("column")}
classes={{ active: classes.active }}
>
column
</TableSortLabel>
</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
// data that comes in the column
</TableBody>
</Table>
</TableContainer>
)}
When clicking on the column, it sorts correctly and changes the background-color of the header text to yellow, but doesn't change the text color. I also experimented with modifying the theme's active and selected colors, but had no success.