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

【问题标题】：How to change table row background color on hover or mouseover in Material ui datatable如何在 Material ui 数据表中悬停或鼠标悬停时更改表格行背景颜色
【发布时间】：2021-10-09 13:56:58
【问题描述】：

React 和 Material-UI 非常新。

当指针/鼠标移到行上时，即悬停时，我正在尝试更改表格行的颜色。

我尝试过其他帖子的“解决方案”，但没有成功。（例如 Root 和 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" }
        },
    },

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

需要做什么/修复什么？

TIA

【问题讨论】：

标签： reactjs material-ui mousehover mui-datatable

【解决方案1】：

通过删除 jss 条件 'snapshot.isDragging' 到设置 background = none，并使用 std css，解决了这个问题。

【讨论】：