如何更改材质ui表中所选行的文本颜色 [英] How to change the text color of the selected row in material ui table

问题描述

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

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

解决方案

背景颜色控制在

这里有一个类似的例子，但是使用了selected".而不是悬停":

I am trying to change the color of the row text and the background color of row on selection.

I am able to change the background color successfully but I am not able to change the text color.

<TableRow
        className={classes.tableBody}
      >

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

解决方案

The background color is controlled in TableRow. In order to get the correct specificity (you shouldn't ever need to leverage "!important" when overriding Material-UI styles), you need to leverage the "hover" class similar to what is done within TableRow.

The color is controlled in TableCell, so that is the level where you need to control it.

For a working solution, in the styles you would have something like:

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

then in the rendering:

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

Here's a working version based on your sandbox:

Here's a similar example, but using "selected" instead of "hover":

https://codesandbox.io/s/llyqqwmr79

This uses the following styles:

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

and some state:

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

and changing the TableRow rendering to be:

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

v4 of Material-UI will include some changes that should make overriding styles considerably easier (and easier to figure out how to do successfully without looking at the source code).

In v4 of Material-UI, we can use the global class names for the selected state ("Mui-selected") and for TableCell ("MuiTableCell-root") and then we only need to apply a single class to TableRow:

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

这篇关于如何更改材质ui表中所选行的文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！