如何修改MaterialUI中TableHead列标题的hover颜色

要实现元素的hover颜色修改，核心是要针对内部的TableSortLabel组件的hover状态设置样式——默认的hover交互是绑定在这个组件上，而非本身。以下是调整后的代码实现：

<TableHead
  sx={{
    "& th": {
      color: "blue",
      backgroundColor: "yellow",
      // 针对<th>内部的TableSortLabel设置hover样式
      "& .MuiTableSortLabel-root:hover": {
        color: "green" // 自定义hover颜色
      }
    },
    // 优化激活状态样式的链式写法
    "& .MuiTableSortLabel-root.Mui-active": {
      color: "red",
      "& .MuiTableSortLabel-icon": {
        color: "red"
      }
    }
  }}
>
  {/* 你的TableHeader内容 */}
</TableHead>

关键说明： #

• hover样式需要定位到MuiTableSortLabel-root:hover，因为表头的排序标签才是实际响应hover的元素
• 激活状态的选择器通过嵌套写法精简代码，更贴合MaterialUI sx的链式语法习惯

内容的提问来源于stack exchange，提问作者joshp