reactjs - Reactjs 中的 MuiTableSortLabel 样式问题

Question

我正在使用 Mui Tables 实现一个数据表。你可以在这里看到预期的结果。问题是我无法将 Sorting SVG Icon 的颜色覆盖为白色并将其作为输出。检查后我知道它是从

.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon

我做了内联样式，还尝试使用 ThemeProvider 来覆盖它，但它没有用。另外我不知道它是从哪里带来排序图标的？因为它不在代码中。请帮我弄清楚这一点。

这是表头的代码。

  return (
    <TableHead>
      <StyledTableRow>
        <StyledTableCell padding="checkbox">
        </StyledTableCell>
        {headCells.map((headCell) => (
          <StyledTableCell
            key={headCell.id}
            align={headCell.text ? 'left' : 'right'}
            padding={headCell.disablePadding ? 'none' : 'default'}
            sortDirection={orderBy === headCell.id ? order : false}
          >
            <TableSortLabel
              style={{color: 'white'}}
              active={orderBy === headCell.id}
              direction={orderBy === headCell.id ? order : 'asc'}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <span className={classes.visuallyHidden}>
                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                </span>
              ) : null}
            </TableSortLabel>
          </StyledTableCell>
        ))}
      </StyledTableRow>
    </TableHead>
  );
}

编辑：

我将 TableRow 自定义为 StyledTableRow，将 TableCell 自定义为 StyledTableCell。

这是它的代码。（虽然不会影响 TableSortLabel）

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}))(TableRow);

标签： reactjsdatatablematerial-uistyling