css - material ui表中如何改变选中行的文字颜色

Question

我正在尝试更改行文本的颜色和选择时行的背景颜色。

我可以成功更改背景颜色，但无法更改文本颜色。

<TableRow
        className={classes.tableBody}
      >

tableBody: {
    "&:focus": {
      color: "yellow !important",
      backgroundColor: "#3D85D2 !important",
    },
  },

Answer 1

背景色控制在TableRow中.为了获得正确的特异性(在覆盖 Material-UI 样式时，您永远不需要利用“!重要”)，您需要利用类似于 TableRow 中所做的那样的“悬停”类>.

颜色控制在TableCell中，所以这是您需要控制它的级别。

对于一个可行的解决方案，在样式中你会有类似的东西:

const styles = theme => ({
  tableRow: {
    "&$hover:hover": {
      backgroundColor: "blue"
    }
  },
  tableCell: {
    "$hover:hover &": {
      color: "pink"
    }
  },
  hover: {}
});

然后在渲染中:

            <TableRow
              hover
              key={row.id}
              classes={{ hover: classes.hover }}
              className={classes.tableRow}
            >
              <TableCell
                className={classes.tableCell}
                component="th"
                scope="row"
              >
                {row.name}
              </TableCell>

这是一个基于您的沙箱的工作版本:

这是一个类似的例子，但使用“selected”而不是“hover”:

https://codesandbox.io/s/llyqqwmr79

这使用了以下样式:

const styles = theme => ({
  tableRow: {
    "&$selected, &$selected:hover": {
      backgroundColor: "purple"
    }
  },
  tableCell: {
    "$selected &": {
      color: "yellow"
    }
  },
  selected: {}
});

还有一些状态:

 const [selectedID, setSelectedID] = useState(null);

并将 TableRow 渲染更改为:

            <TableRow
              hover
              key={row.id}
              onClick={() => {
                setSelectedID(row.id);
              }}
              selected={selectedID === row.id}
              classes={{ selected: classes.selected }}
              className={classes.tableRow}
            >

Material-UI 的 v4 将包含 some changes这应该使覆盖样式变得相当容易(并且更容易弄清楚如何在不查看源代码的情况下成功完成)。

在 Material-UI v4 中，我们可以为 selected state 使用全局类名(“Mui-selected”)和 TableCell ("MuiTableCell-root") 然后我们只需要将一个类应用于 TableRow:

const styles = (theme) => ({
  tableRow: {
    "&.Mui-selected, &.Mui-selected:hover": {
      backgroundColor: "purple",
      "& > .MuiTableCell-root": {
        color: "yellow"
      }
    }
  }
});