SpeedDial color change - ReactJS

Question

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")??

score 2 · Accepted Answer · answered Aug 02 '21 at 17:15

You can do this in several ways.

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.

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.

SpeedDial color change - ReactJS

1 Answers1