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

Posted 2023-02-22

【中文标题】如何在 Material ui 数据表中悬停或鼠标悬停时更改表格行背景颜色

【英文标题】：How to change table row background color on hover or mouseover in Material ui datatable

【发布时间】：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

【参考方案1】：

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