CODEWITHSUNDEEP
reactjsmaterial-ui
React Enjoyer
React Enjoyer

Reputation: 1402

IconButton from MUI no longer changes hover color with makeStyles?

Hi I was looking in a way to change the hover color from IconButton However the solution-sandbox that I found doesn't seem to be working anymore

This is what I have Code-Sandbox

Upvotes: 2

Views: 1362

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 81156

From https://mui.com/guides/migration-v4/#style-library:

The style library used by default in v5 is emotion. While migrating from JSS to emotion, and if you are using JSS style overrides for your components (for example overrides created by makeStyles), you will need to take care of the CSS injection order. To do so, you need to have the StyledEngineProvider with the injectFirst option at the top of your component tree.

If I change your index.js to the following, the style overrides work:

import { StyledEngineProvider } from "@mui/material/styles";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <App />
  </StyledEngineProvider>,
  rootElement
);

Edit Using JSS in v5

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;
  }
`);

Edit override IconButton styles

Upvotes: 1

Evren
Evren

Reputation: 4410

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

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

Upvotes: 0

Related Questions