MaterialUI自定义悬停样式

时间:2018-10-01 17:30:42

标签: reactjs styles

我是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 个答案:

答案 0 :(得分: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);

答案 1 :(得分:0)

如果您想制作一些自定义悬停动画,则可以尝试这种风格
此代码块将在悬停时更改卡的颜色。

有关更多信息,请在这里Transitions in MUI

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

答案 2 :(得分:0)

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

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

所以,

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