Question

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

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

<TableRow
        className={classes.tableBody}
      >

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

Answer 1

背景颜色在TableRow中进行控制。为了获得正确的特异性（在覆盖Material-UI样式时，您永远都不需要利用“！important”），您需要利用“ hover”类，类似于在TableRow中所做的事情。 / p>

在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，这应该使覆盖样式相当容易（并且更容易找出如何成功完成而不查看源代码）。

Answer 2

这是唯一对我有用的解决方案

const styles = theme => ({
  tableRow: {
   '&&:hover': {
      backgroundColor: '#0CB5F3',
    },
   },
});

   <TableRow
      hover
      className={classes.tableRow}
    >

Answer 3

const useStyles = makeStyles((theme) => ({
 selected: {
    backgroundColor: "green !important",
    "&:hover": {
      backgroundColor: "green !important",
    },
  },
}));

 const classes = useStyles();
<TableRow selected classes={{selected: classes.selected,}}/>

如何在材料UI表中更改所选行的文本颜色

3 个答案: