如何在Material ui datatable中悬停或鼠标悬停时更改表行背景颜色

Question

React和Material-UI非常非常新。

我试图改变颜色的表行当指针/鼠标移动到行，即悬停。

我尝试过其他帖子的"解决方案"，但没有成功。(例如根、cell和tableRow)

xx.js

export const xxTheme = createTheme({
typography: {
fontFamily: 'xxText',
fontSize: 11,
},
tableRow: {
"&$hover:hover": { backgroundColor: "blue"  }
},
tableCell: {
"$hover:hover &": { color: "pink"
}
},
hover: {},
overrides: {
MuiTableCell: {
root:{
color: xxColors.grey2,
'& .MuiCheckbox': { color: xxColors.grey2, },
"&$hover:hover" : { backgroundColor: "blue" }
},
head: {...}
tableRow: { "&$hover:hover": { backgroundColor: "cyan" }
},
},

import {Table, TableContainer} from "@material-ui/core";
import {Checkbox, TableBody, TableCell, TableRow} from "@material-ui/core";
import {xxColors} from "../styles/xx";
<TableRow
key={step.workStepId}
ref={dragProvided.innerRef}
selected={isItemSelected}
aria-checked={isItemSelected}
{...dragProvided.draggableProps}
classes={{'hover':{color:'#7EA55FF'}}}
style={{
...dragProvided.draggableProps.style,
background: snapshot.isDragging   ? xxColors.blue1 : "none",
}}
>
<TableCell key={'drag'} align={'left'}>
<div {...dragProvided.dragHandleProps}>
<ReorderIcon/>
</div>
</TableCell>

什么需要做/修复?

TIA

Answer 1

通过删除jss条件快照。

拖拽到设置background = none，并使用std css，解决了这个问题。