如何在 Material ui 数据 table 中悬停或鼠标悬停时更改 table 行背景颜色

Question

对 React 非常非常陌生，Material-UI。

我试图在指针/鼠标移到行上时更改 table 行的颜色，即悬停时。

我已经尝试 'solutions' 来自其他帖子但没有成功。（例如根和单元格以及 table行）

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" }
        },
    },

在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>

需要什么doing/fixing？

TIA

Answer 1

通过删除 jss 条件 'snapshot.isDragging' 设置背景 = none，并使用标准 css，解决了该问题。

如何在 Material ui 数据 table 中悬停或鼠标悬停时更改 table 行背景颜色

How to change table row background color on hover or mouseover in Material ui datatable

reactjs

material-ui

mousehover

mui-datatable