Блог

 const useStyles = makeStyles({
  buttonStyle: {
    color: "",
    background: "red",

    "amp;:hover": {
      transform: "scale(1.1)", // Scale by 10%
      background: "red",
    },
  },
});

   <div>
      <h1>Heloo</h1>
      <Button
        className={classes.buttonStyle}
        variant="contained"
        disableElevation
      >
        <ArrowBackIosIcon />
      </Button>
    </div>
 

По умолчанию кнопка при нажатии имеет волны, как ее удалить и как придать
компоненту значков другой цвет

Вот ссылка на песочницу вашего кода.

Вы можете удалить эффект пульсации (волн) с помощью disableRipple опоры, расположенной на кнопке.

 <Button
  className={classes.buttonStyle}
  variant="contained"
  disableElevation
  disableRipple
  disableFocusRipple>
    <ArrowBackIosIcon />
</Button>
 

Существует несколько способов, с помощью которых вы можете обновить стиль значка. Я использовал type селектор для оформления значка в кнопке. Вы также можете использовать имя класса для оформления значка. Ниже приведен фрагмент из useStyles ссылки в прикрепленной песочнице.

 "amp; svg": {
  color: "white"
}