如何修改MUI TableSortLabel的排序图标颜色

你的问题出在直接给TableSortLabel容器加fill样式，没有精准作用到内部的图标元素上。以下几种方法可以帮你把图标改成红色：

• 方法一：通过嵌套选择器定位图标（推荐）
  利用MUI内置的类名MuiTableSortLabel-icon直接选中图标，设置颜色：

  <TableSortLabel
      active={orderBy === headCell.id}
      direction={orderBy === headCell.id ? order : "asc"}
      onClick={createSortHandler(headCell.id)}
      IconComponent={ArrowDropUpIcon}
      sx={{
          '& .MuiTableSortLabel-icon': {
              fill: 'red', // 默认图标颜色
          },
          // 可选：单独设置激活状态下的图标颜色
          '&.Mui-active .MuiTableSortLabel-icon': {
              fill: 'darkred',
          }
      }}
  >
  

• 方法二：给自定义IconComponent直接加样式
  如果是自定义了图标组件，可以直接在图标上设置sx属性：

  <TableSortLabel
      active={orderBy === headCell.id}
      direction={orderBy === headCell.id ? order : "asc"}
      onClick={createSortHandler(headCell.id)}
      IconComponent={() => <ArrowDropUpIcon sx={{ fill: 'red' }} />}
  >
  

• 方法三：动态区分激活/非激活状态颜色
  结合active属性，给不同状态设置不同颜色：

  <TableSortLabel
      active={orderBy === headCell.id}
      direction={orderBy === headCell.id ? order : "asc"}
      onClick={createSortHandler(headCell.id)}
      IconComponent={ArrowDropUpIcon}
      sx={{
          '& .MuiTableSortLabel-icon': {
              fill: orderBy === headCell.id ? 'red' : '#ccc', // 激活红，非激活灰
          }
      }}
  >
  

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