Блог

Пример здесь

Видны три кнопки.

Первый из которых не имеет всплывающей подсказки и меняет цвет в зависимости от состояния и наведения курсора. У второго есть всплывающая подсказка, и имя класса перезаписывается, что приводит к отображению неправильных цветов. В третьем случае просто переупорядочены реквизиты в дочернем компоненте для решения проблемы.

Мой вопрос: это ожидаемое поведение? Действительно ли мне нужно создавать className последнюю опору, чтобы она действительно использовалась?

В пользовательском интерфейсе Material вы обычно должны следовать их рекомендациям по стилизации ваших компонентов. Одним из которых является переопределение стиля с помощью classes prop

 const StatusButton = React.forwardRef((props, ref) => {
  const { classes, status, ...rest } = props;

  return (
    <Button
      variant="contained"
      color="primary"
      size="small"
      classes={{root: classes[status]}} // this was previously className prop
      ref={ref}
      {...rest}
    >
      <CloseIcon fontSize="small" className={classes.actionIcon} />
      {status}
    </Button>
  );
});