Changing the color of a hovered TableHead Column Identifier in MaterialUI-CodePudding

I'm trying to style child th elements using the TableHead

CodePudding user response：

You can simply add this style to sx prop of your TableHead component:

// for default hover color
"& .MuiTableSortLabel-root:hover, .MuiTableSortLabel-root:hover .MuiTableSortLabel-icon": {
  color: "brown"
},
// for active case hover color
"& .MuiTableSortLabel-root.Mui-active:hover, .MuiTableSortLabel-root.Mui-active:hover .MuiTableSortLabel-icon": {
  color: "pink"
}

Here is the working example of this solution.