My Goal:
I aim to empower users with the ability to apply customized styles to my EnhancedTable component by utilizing a styles object containing properties like headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor, and more. These properties can be used to color the cells in both TableHead and TableBody.
Within the TableHead component, I am leveraging a TableSortLabel similar to the example demonstrated in the material-ui documentation here: https://material-ui.com/components/tables/#sorting-amp-selecting
My objective is to dynamically change the text and arrow icon colors on hover and when active based on user-provided props.
Let's examine how the colors of the TableSortLabel behave in different scenarios:
Initially, the text color is grey with no arrow visible. When hovered over, a grey arrow appears alongside black text. Upon clicking, an active state is triggered where both the grey arrow and text turn black permanently until the active state is removed.
My Attempts so Far:
const useStyles = makeStyles({
tableSortLabel: props => ({
backgroundColor: "blue",
color: props.headCellColor,
fill: props.headCellColor,
"&:hover": {
backgroundColor: "blue"
}
})
});
function EnhancedTableHeadCell(props) {
const { isActive, onHoverSortState, clickHandler, ...otherProps } = props;
const classes = useStyles(props.styles);
return (
<FancyTableCell styles={props.styles} {...otherProps}>
<TableSortLabel
active={isActive}
classes={{
icon: classes.tableSortLabel,
active: classes.tableSortLabel
}}
direction={onHoverSortState}
onClick={clickHandler}
>
{props.children}
</TableSortLabel>
</FancyTableCell>
);
}
This is what it looks like in the browser:
The first image depicts a normal header, the second showcases the hover effect, and the third illustrates the active state after being clicked.
Upon observation, it is clear that the text color remains unaffected by the color css property in all three instances (normal, hover, active). While the backgroundColor impacts the icon but not the text during hovering, we notice that the backgroundColor does affect the text when the component is active. The behavior aligns as expected with the icon, the only discrepancy lies with the text.
What could be causing this issue? How can I troubleshoot and resolve it?