我应该如何自定义Button颜色？

Question

如文档中所述，color属性接受“default”，“inherit”，“primary”，“secondary”的枚举。我想要一个除“主要”和“次要”之外的任意颜色。一种可能的解决方案是利用“Overriding with classes”功能，我可以在其中指定根背景，并且它可以工作。

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”时，此行为是不同的，在这种情况下，当鼠标悬停时，背景会变暗。 我该如何正确指定自定义颜色？