Search code examples
reactjsmaterial-uispeed-dial

SpeedDial color change - ReactJS

I'm trying to change SpeedDial color in material-ui. But I can only change three color "default", "primary", and "secondary" using FabProps.

<SpeedDial
  ariaLabel="SpeedDial openIcon example"
  className={st.speedDial}
  FabProps={{
    color: "secondary",
  }}
></SpeedDial>

How can I change SpeedDial color using by Hex-color(like "#F19920")??

Solution

  • You can do this in several ways.

    1. You can add custom classes to the component using classes={{}} prop.

    Here are the classes you can pass to the component. And here is an example of those classes being used to change your color, on line 26 I add the className, and on line 64 I use it.

    1. Another way is you can overwrite the pallet in your theme object, docs. This way you can use color="primary" and it will use the color that you specified in the pallet.