Блог

Привет, я искал способ изменить цвет при наведении с помощью IconButton, однако решение-песочница, которое я нашел, похоже, больше не работает

Это то, что у меня есть код-песочница

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

Библиотека стилей, используемая по умолчанию в v5, — это emotion . При переходе с JSS на emotion, и если вы используете переопределения стиля JSS для своих компонентов (например, переопределения, созданные makeStyles), вам нужно будет позаботиться о порядке внедрения CSS. Для этого вам необходимо иметь StyledEngineProvider с опцией injectFirst в верхней части дерева компонентов.

Если я изменю ваш index.js в соответствии со следующим, стиль переопределяет работу:

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

В дополнение к добавлению <StyledEngineProvider injectFirst> , я также удалил StrictMode , поскольку makeStyles не поддерживает его — стили, созданные с помощью makeStyles , не будут надежно поддерживаться в DOM в строгом режиме.

Поскольку вы используете v5, лучшим вариантом было бы полностью избежать makeStyles (который устарел в v5) и использовать styled вместо этого. Тогда вам не нужно index.js изменяется и может сохранять строгий режим.

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

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

Вы должны добавить !important в свой стиль, тогда он должен работать

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