MaterialUI 自定义悬停样式

IT技术 reactjs styles
2021-04-03 02:14:57

我是 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);

谢谢你的帮助！

3个回答

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

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);
据我所知，您只能覆盖类。对于样式伪代码，您必须像这样选择它们 { tr: {'&:hover': { color: 'red' }} }。我查看了 Material-UI 文档，实际上它的使用就像我提到的那样。
2021-06-01 02:14:57
谢谢你的&:hover帮助。我在文档中没有找到一个。。
2021-06-09 02:14:57
这是关于 material-ui 中覆盖的文档。您可以在创建MuiTheme() 时覆盖悬停样式。文档覆盖功能
2021-06-10 02:14:57
不过，查看 MaterialUI API，似乎推荐的方法是覆盖 CSS API hover material-ui.com/api/table-row
2021-06-11 02:14:57

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

有关更多信息，请在此处查看MUI 中的转换

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

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

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

所以，

tableWrapper: {
    overflowX: "auto",
  
  hover: {
    "&:hover": {
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    },
}
其它你可能感兴趣的问题
上一篇使用 Typescript 和 React.Konva 指定 onClick 事件类型 下一篇尝试导入错误：“useHistory”未从“react-router-dom”导出