如何更改材质ui表中所选行的文本颜色
我正在尝试更改行文本的颜色和选择时行的背景颜色.
我可以成功更改背景颜色,但无法更改文本颜色.
解决方案背景颜色控制在
这里有一个类似的例子,但是使用了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"
}
}
}
});
相关文章