Question

我正在为我的Web应用程序使用React和Material UI。我想更改表格行的悬停颜色，但不能这样做。

示例代码

x={
  hover:{
    color:'green'
 }
}

<TableRow hover
          key={lead.id} className={classes.row}
          classes={{
                    hover:x.hover
                   }}
          onClick={() => {}}>

Answer 1

到目前为止，我已经有了这个解决方案。也许还有其他方法可以替代tableRow的CSS，但是这种方法就像一个咒语：

const styles = theme => ({
tableRow: {
    "&:hover": {
      backgroundColor: "blue !important"
    }
  }
});


<TableRow hover
      key={lead.id} className={classes.tableRow}

      onClick={() => {}}>

随时问任何问题。

Answer 2

implementation of the TableRow component和customizing components page表明您需要重写两个类root.hover：hover和.hover来更改悬停颜色。

const useStyles = makeStyles((theme) => ({
  /* Styles applied to the root element. */
  root: {
    // Default root styles
    color: 'inherit',
    display: 'table-row',
    verticalAlign: 'middle',
    // We disable the focus ring for mouse, touch and keyboard users.
    outline: 0,

    '&$hover:hover': {
      // Set hover color
      backgroundColor: theme.palette.action.hover,
    },
  },

  /* Pseudo-class applied to the root element if `hover={true}`. */
  hover: {},
}));

然后在您的组件中，可以将样式应用于prop类。

const HelloWorld = () => {
  const classes = useStyles();
  return (
    <TableRow classes={classes}><TableCell></TableCell></TableRow>
  );
};

Answer 3

您可以通过使用

来维持对Material UI悬停道具的依赖

hover: {
  '&:hover': {
    backgroundColor: 'green !important',
  },
},

Answer 4

tableRow: {
    hover: {
        "&$hover:hover": {
            backgroundColor: '#49bb7b',
        },
    },
}

<TableRow className={classes.tableRow} key={n.id} hover onClick={event => this.handleClick(event)}>Text</TableRow>

Answer 5

如果您使用withstyles，则可以像这样在根元素中覆盖它：

操作方法示例如下：https://codesandbox.io/s/7249117670

Answer 6

只需将鼠标悬停在TableRow中，而不将其放在标题Tablerow中

 <StyledTableRow hover key={row.name}>

@ material-ui / core / TableRow已内置处理悬停的代码，它对我有用。

如何更改材料UI表的悬停颜色

6 个答案: