MaterialUI 自定义悬停样式

Posted 2023-02-22

【中文标题】MaterialUI 自定义悬停样式

【英文标题】：MaterialUI Custom Hover Style

【发布时间】：2019-03-06 20:32:45

【问题描述】：

我是 React 的新手，我对如何在 Material UI 中覆盖类有点困惑。我查看了这些示例并尝试模仿它，但它似乎并没有按照我的意愿去做。

基本上，在表格行悬停时，我想让它设置与当前所做的不同的背景颜色。

这是我的方法：

const styles = theme => (
  root: 
    width: "100%",
    marginTop: theme.spacing.unit * 3
  ,
  table: 
    minWidth: 1020
  ,
  tableWrapper: 
    overflowX: "auto"
  ,
  hover: 
    "&:hover": 
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    
  
);

return <TableRow hover classes=hover: classes.hover role="checkbox" aria-checked=isSelected tabIndex=-1 key=n.row_id selected=isSelected>
     this.insertRow(n, isSelected, counter, checkbox)

;

export default withStyles(styles)(EnhancedTable);

感谢您的帮助！

【参考方案1】：

您应该为 TableRow 定义一个键作为类名，然后将悬停样式作为对象放在该类名上。

const styles = theme => (
  ...
  tr: 
    background: "#f1f1f1",
    '&:hover': 
       background: "#f00",
    ,
  ,
  ...
);

return <TableRow className=props.classes.tr ...>

在另一个例子中，它会是这样的：

const styles = 
  tr: 
    background: "#f1f1f1",
    '&:hover': 
      background: "#f00",
    
  
;

function Table(props) 
  return (
    <Table>
      <TableRow className=props.classes.tr>
        "table row"
      </TableRow>
    </Table>
  );


export default withStyles(styles)(Table);

【讨论】：

查看 MaterialUI API，似乎推荐的方法是覆盖 CSS API hover material-ui.com/api/table-row

据我所知，您只能覆盖类。对于样式伪类，您必须像这样选择它们 tr: '&:hover': color: 'red' 。我查看了 Material-UI 文档，实际上它的使用方式与我提到的一样。

这是一个关于material-ui中覆盖的文档。您可以在创建MuiTheme() 时覆盖悬停样式。 Document overrides feature

感谢&:hover 的帮助。我在文档中没有找到一个..

【参考方案2】：

如果您想制作一些自定义悬停动画，那么您可以尝试这种样式 此代码块将在悬停时更改卡片的颜色。

更多信息请查看Transitions in MUI

card : 
    transition: theme.transitions.create(["background", "background-color"], 
      duration: theme.transitions.duration.complex,
    ),
    "&:hover": 
      backgroundColor: "#333",
    ,

【参考方案3】：

通过添加一个简单的语句，您可以自定义 Hover 属性..

'&:hover': 
background: "rgb(7, 177, 77, 0.42)",    
             

所以，

tableWrapper: 
    overflowX: "auto",
  
  hover: 
    "&:hover": 
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    ,