当我将鼠标悬停在材质图标上时，如何让它们改变颜色？答案

【问题标题】：How can I make my Material Icons change color when I hover over them?当我将鼠标悬停在材质图标上时，如何让它们改变颜色？
【发布时间】：2022-01-06 20:07:51
【问题描述】：

我在我的 React 页面中使用 mui 图标 5.2.0。

图标正在显示，但当我将鼠标悬停在它上面时它不会改变颜色。

这是我的代码：

import EditIcon from '@mui/icons-material/Edit';
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
    customHoverFocus: {
        "&:hover, &.Mui-focusVisible": { backgroundColor: "yellow" }
    }
}));

<EditIcon className={useStyles.customHoverFocus} />

我有什么遗漏吗？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

你可以这样做

 <EditIcon sx={{ "& :hover": { color: "yellow" } }} />

这是一个例子https://codesandbox.io/s/material-ui-icon-color-bfb8d?file=/demo.js:1047-1099

【讨论】：