reactjs 如何更改Material-UI表的悬停颜色?

cedebl8k  于 2023-08-04  发布在  React
关注(0)|答案(9)|浏览(142)

我正在使用React和Material UI作为我的Web应用程序。我想更改表格行的悬停颜色,但无法执行此操作。
示例代码:

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

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

字符串

r7s23pms

r7s23pms1#

到目前为止我已经有了这个解决方案。也许还有其他方法可以覆盖tableRow的css,但这一个很有魅力:

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

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

      onClick={() => {}}>

字符串
有什么问题可以问。

b4lqfgs4

b4lqfgs42#

这是MUI v5中的一个简单的任务。请参阅此处的文档:

<Table
  sx={{
    "& .MuiTableRow-root:hover": {
      backgroundColor: "primary.light"
    }
  }}
>

字符串

现场演示


的数据

np8igboo

np8igboo3#

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

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

字符串

velaa5lx

velaa5lx4#

implementation of the TableRow component和customizingcomponents页面显示,您需要重写两个类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: {},
}));

字符串
然后在你的组件中,你可以将样式应用到类中。

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

f87krz0w

f87krz0w5#

以防万一,如果您正在使用组件覆盖并且想要执行样式覆盖,您必须以根为目标,而不是悬停规则。我花了相当长的一段时间试图让pseudo:hover在这上面工作,但它永远不会工作。
这是我有的。

MuiTableRow: {
    styleOverrides: {
        // Even though there is a hover rule we have to override it here. Don't ask.
        root: {
            '&.MuiTableRow-hover:hover': {
                backgroundColor: 'blue',
            },
        },
    },
},

字符串
使用这个是你想在主题级别覆盖组件与样式覆盖,sx或useStyles。

taor4pac

taor4pac6#

您可以使用

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

字符串

qncylg1j

qncylg1j7#

只在TableRow中放置hover,而不是头TableRow

<StyledTableRow hover key={row.name}>

字符串
@material-ui/core/TableRow已经内置了处理悬停的代码,它对我很有效。

bsxbgnwa

bsxbgnwa8#

如果你使用的是withstyles,你可以像这样在根元素中覆盖它:
如何做到这一点的一个例子是在这里:https://codesandbox.io/s/7249117670

hrirmatl

hrirmatl9#

通常,使用MUI比添加每个组件覆盖更好的方法是找到哪个主题变量负责我们想要实现的效果并覆盖该变量。
很可能你的表格行、列表项、菜单项和其他项都应该有一致的悬停背景色。如果是这种情况,您可以覆盖palette.action.hover

相关问题