IconButton from MUI no longer changes hover color with makeStyles?-CodePudding

Hi I was looking in a way to change the hover color from IconButton However the

In addition to adding <StyledEngineProvider injectFirst>, I also removed StrictMode since makeStyles doesn't support it -- styles generated by makeStyles will not get maintained in the DOM reliably in strict mode.

Since you're using v5, the better option would be to avoid makeStyles (which is deprecated in v5) entirely and use styled instead. Then you don't need the index.js changes and can keep strict mode.

import React from "react";
import { styled } from "@mui/material/styles";
import IconButton from "@mui/material/IconButton";

const StyledIconButton = styled(IconButton)(`
  &:hover, &.Mui-focusVisible {
    background-color: yellow;
  }
`);

CodePudding user response：

You should add !important to your style then it should work

const useStyles = makeStyles((theme) => ({
  customHoverFocus: {
    "&:hover, &.MuiIconButton": { background: "yellow !important" }
  }
}));