To customize the appearance of the TableSortLabel component, you must override its internal styles. In particular, if you refer to the CSS API documentation for TableSortLabel, you'll notice that it includes a style property called icon.
Start by defining these custom styles:
const styles = theme => ({
// Fully visible for active icons
activeSortIcon: {
opacity: 1,
},
// Semi-transparent for inactive icons
inactiveSortIcon: {
opacity: 0.4,
},
});
Next, override the default icon style within your TableSortLabel based on your criteria for determining whether the sort icon should be active or not:
<TableSortLabel
classes={{
// Use the active class if this is the selected column, otherwise use the inactive class
icon: ((orderBy === column.id) ? classes.activeSortIcon : classes.inactiveSortIcon ) }}
>
Your initial solution was correct in terms of styling and logic, but the inline styles were being overridden by the internal styles of the TableSortLabel component. When you need to modify the internal styling of a component, you'll typically need to utilize overrides like we've done here.
If you're unfamiliar with defining and applying styles to components using the classes prop, you can find more information about it here. Be sure to explore the code examples provided on that page as well as throughout the rest of the documentation.