Completely new to React and Material-UI.
I'm attempting to modify the color of table rows when hovering over them with the mouse.
I have tried various solutions from different posts but none have worked for me. (e.g. Root, cell, and tableRow)
The 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" }
},
},
In the xxTableBody.js
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>
What needs to be addressed/fixed?
Thanks in advance