当我将鼠标悬停在材质图标上时,如何使它们改变颜色?

我在React页面中使用了mui icons 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} />

我还缺什么吗?