reactjs MaterialUI自定义悬停样式

r1zk6ea1 于 2023-06-22 发布在 React

关注(0)|答案(5)|浏览(143)

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

谢谢你的帮助！

reactjs

来源：https://stackoverflow.com/questions/52596070/materialui-custom-hover-style

5条答案

按热度按时间

mccptt671#

您应该将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);

赞(0）回复(0）举报 2023-06-22

vulvrdjw2#

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

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

那么

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

赞(0）回复(0）举报 2023-06-22

ddrv8njm3#

如果您正在寻找一些自定义悬停动画，那么您可以尝试这种风格
这段代码将改变悬停时卡片的颜色。
更多信息请点击这里Transitions in MUI

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

赞(0）回复(0）举报 2023-06-22

hjzp0vay4#

以下是我的方法

const checkBoxStyles = () => ({
  root: {
    '&$checked': {
      color: '#4885FB'
    },
    '&$disabled': {
      color: '#96C9FF'
    },
    '&:hover': {
      backgroundColor: '#E4F2FF !important'
    }
  },
  checked: {},
  disabled: {
    color: '#96C9FF'
  }
});

const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);

请注意：如果您不指定！当复选框被选中时，悬停背景颜色将被覆盖。
我使用的是Material UI版本4

赞(0）回复(0）举报 2023-06-22

gxwragnw5#

例如，我改变了SVG图标悬停时的颜色：

<IconButton>
        <CiteIcon
          sx={{
            '&:hover': {
              '& > path,use': {
                fill: '#f00',
              },
            },
          }}
        />
      </IconButton>

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs MaterialUI自定义悬停样式

5条答案

相关问题

热门标签

最新问答