MaterialUI 自定义悬停样式 [英] MaterialUI Custom Hover Style

问题描述

我是 React 的新手，我对如何覆盖 Material UI 中的类有点困惑.我查看了示例并尝试模仿它，但它似乎没有做我想要它做的事情.

I'm a newbie here to React and I'm a little bit confused on how to override classes in Material UI. I took a look at the examples and tried to mimic it but it didn't seem to do what I want it to do.

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

Basically, on a table row hover, I want to make it set a background color different from what it is currently doing.

这是我的方法:

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

感谢您的帮助！

推荐答案

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

You should define a key for TableRow as a className and then put your hover style right on that class name as an object.

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

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

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

In another example it would be something like this:

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 自定义悬停样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！