Как мне настроить цвет кнопки?

Question

Как указано в документе, свойство color принимает перечисления «по умолчанию», «наследовать», «первичный», «вторичный».Я хочу произвольный цвет, отличный от «основного» и «вторичного».Возможное решение - использовать функцию «Переопределение с классами», где я могу указать корневой фон, и он работает.

const styles = {
  root: {
    backgroundColor: "rgba(44, 152, 240)",
  }
};

function FloatingActionButtons(props) {
  const { classes } = props;
  return (
    <Button
      variant="fab"
      classes={{ root: classes.root }}
    >
      <Icon style={{ fontSize: 34 }}>play_arrow</Icon>
    </Button>
  );
}

Однако, когда мышь висит над кнопкой, фон по умолчанию восстанавливает светло-серый цвет по умолчанию.Это поведение отличается, когда я задаю свойство color для «primary», и в этом случае фон немного тускнеет, когда мышь висит над ним.
Как правильно указать настраиваемый цвет?

Answer 1

Использовать курсор при наведении

const styles = {
  root: {
    backgroundColor: "rgba(44, 152, 240)",
    '&:hover':{
      backgroundColor:"rgba(44, 152, 240)",
    },
  }
};

Посмотрите Индивидуальные кнопки для получения более подробной информации.