Наведите курсор на иконку

Question

IconButton Hover

Это иконка от Material-UI, которую я использую. Как видите, при наведении курсора на значок появляется небольшая серая рамка. Какое свойство отключить это? Я не нашел его в документации Material-UI, и мне нужно избавиться от этой функции серого наведения.

Код:

<IconButton>
    <BackButton />
</IconButton>

Answer 1

(Альтернативный путь)

Вы также можете переопределить стиль IconButton через MuiThemeProvider:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiIconButton: {
      root: {
        '&:hover': {
          backgroundColor: "$labelcolor"
        }
      }
    }
  }
})

И оберните ваш компонент, который вы хотите редактировать, с помощью этого кода:

<MuiThemeProvider theme={theme}>

// Your Component here

</MuiThemeProvider>

Answer 2

Там нет свойства, чтобы отключить его. Вам просто нужно переопределить CSS:

<IconButton className={"MyCustomButton"}>
    <BackButton />
</IconButton>

С правилом CSS, как:

.MyCustomButton:hover {
  background-color: inherit !important;
}

Answer 3

      <IconButton sx={{ "&:hover": { color: "green" } }}>
    <BackButton />
</IconButton>

Answer 4

Можно использовать makeStyles(styles) логика перехвата для изменения пользовательского интерфейса материала по умолчанию IconButton CSS Псевдоклассы, например :hover стиль

пример кода :

      import { makeStyles } from "@material-ui/core/styles";
import { IconButton } from "@material-ui/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";

const useStyles = makeStyles((theme) => ({
  myClassName: {
    backgroundColor: "#EFD26E",
    position: "relative",
    "&:hover": {
      backgroundColor: "green"
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <IconButton color="inherit" className={classes.myClassName}>
        <ArrowBackIcon />
      </IconButton>
    </div>
  );
}

экраны:

• цвет bg
• цвет bg при наведении

Answer 5

Вы можете использовать hoverColor: Colors.transparent:

      IconButton(
  hoverColor: Colors.transparent, 
  icon: Icon(Icons.clear_rounded),
  onPressed: () {},
),

Answer 6

IconButton имеет disabled имущество:

<IconButton disabled>
    <BackButton />
</IconButton>

https://material-ui.com/api/icon-button/

Answer 7

Вы можете добавить наведение, обернув компонент с помощью всплывающей подсказки @material-ui

<Tooltip>
  ...your code here
</Tooltip>