更改 MUI 的活动样式 table

Question

我有一个 table，我可以在其中对输入进行排序，就像在 mui 网站上的“排序和选择”下一样： https://material-ui.com/components/tables/

我想要的是改变选择排序的header-text的颜色。我尝试了以下方法，但仅设法以这种方式更改了 background-color（简化的代码示例）：

const useStyles = makeStyles({
  active: {
    color: "yellow",
    backgroundColor: "yellow",
  },
});

function Example() {
  const classes = useStyles();
  // functions for sorting etc. here left out
  return (
  <TableContainer component={Paper}>
      <Table>
          <TableHead>
              <TableRow>
               <StyledTableCell>
                    <TableSortLabel
                      active={valueToOrderBy === "column"}
                      direction={
                        valueToOrderBy == "column" ? orderDirection : "asc"
                      }
                      onClick={createSortHandler("column")}
                      classes={{ active: classes.active }}
                    >
                      column
                    </TableSortLabel>
                  </StyledTableCell>
                 </TableRow>
          </TableHead>
        <TableBody>
        // data that comes in the column
       </TableBody>
         </Table>
        </TableContainer>
        )}

因此，当我单击该列时，该列已排序并且 header-text 的 background-color 变为黄色，但不是文本颜色。我试过更改主题活动和选择的颜色，但这也没有用。

Answer 1

回答了同样的问题。

问题是颜色是在 root&$active 选择器中定义的。 active 选择器仅用作“伪”选择器，如 source.

中所示

以下代码将正确覆盖这两个属性：

const useStyles = makeStyles({
  root: {
    '&$active': {
      color: "yellow",
      backgroundColor: "yellow",
    },
  },
  active: {}, // pseudo
});

...

<TableSortLabel
  active={valueToOrderBy === "column"}
  direction={
    valueToOrderBy == "column" ? orderDirection : "asc"
  }
  onClick={createSortHandler("column")}
  classes={{ root: classes.root, active: classes.active }}
>
  column
</TableSortLabel>

见Codesandbox

更改 MUI 的活动样式 table

Change active style of MUI table

css

reactjs

material-ui

jss