0

As stated in the doc, the color property accepts enums of "default", "inherit", "primary", "secondary". I want an arbitrary color other than "primary" and "secondary". A possible solution is by utilizing the "Overriding with classes" feature where I can specify the root background, and it works.

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>
  );
}

However, when the mouse hangs over the button, the background restores to the default light grey. This behavior is different when I specify the color property to "primary", in which case the background dims a bit when the mouse hangs over.
How should I specify the customized color correctly?

Zhengquan Bai
  • 1,057
  • 3
  • 14
  • 31

1 Answers1

1

Use hover selector 

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

Have a look at Customized Buttons for more details.

noName94
  • 3,783
  • 1
  • 16
  • 32
  • Nice. Another way to go about it is to set up a standalone theme for this particular button and use "primary" as color. But it's a bit overkill. – Zhengquan Bai May 22 '18 at 15:38