MUI的IconButton使用makeStyles无法修改悬停颜色该如何解决？

以下是不同场景下的实现方法：

• 使用sx属性直接配置（MUI v5 单个组件修改推荐）

import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';

function App() {
  return (
    <IconButton 
      sx={{
        // 自定义正常状态下的图标颜色
        color: '#666',
        // 自定义悬停状态样式
        '&:hover': {
          // 悬停背景色，可自行调整透明度和色值
          backgroundColor: 'rgba(255, 77, 79, 0.1)',
          // 悬停时的图标颜色
          color: '#ff4d4f'
        }
      }}
    >
      <DeleteIcon />
    </IconButton>
  );
}

• 使用styled封装可复用的自定义IconButton

import { styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';

const HoverIconButton = styled(IconButton)(({ theme }) => ({
  color: theme.palette.primary.main,
  '&:hover': {
    backgroundColor: theme.palette.action.hover,
    color: theme.palette.primary.dark
  }
}));

// 业务代码中直接调用即可
<HoverIconButton>
  <DeleteIcon />
</HoverIconButton>

• 全局配置所有IconButton的悬停样式

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiIconButton: {
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: 'rgba(0, 120, 212, 0.1)',
            color: '#0078d4'
          }
        }
      }
    }
  }
});

// 入口文件用ThemeProvider包裹整个应用即可生效
function Root() {
  return (
    <ThemeProvider theme={customTheme}>
      <App />
    </ThemeProvider>
  );
}

如果你使用的是MUI v4版本，可以用makeStyles实现：

import { makeStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';

const useStyles = makeStyles({
  customBtn: {
    color: '#666',
    '&:hover': {
      backgroundColor: 'rgba(139, 92, 246, 0.1)',
      color: '#8b5cf6'
    }
  }
});

function App() {
  const classes = useStyles();
  return <IconButton className={classes.customBtn}><DeleteIcon /></IconButton>
}

内容的提问来源于stack exchange，提问作者React Enjoyer