I am building an application using react and material-ui. Material-ui components comes with its custom classical blue-grey google style colors and I want to modify all of them with my custom ones. I have used createTheme() from mui to define my custom palette in the following way:

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
  palette: {
    primary: {
      light: "yellow",
      main: "red",
      dark: "green",
      contrastText: "#000"
    },
    secondary: {
      light: "blue",
      main: "purple",
      dark: "orange",
      contrastText: "#000"
    },
    action: {
      active: "magenta",
      hover: "cyan",
      selected: "black"
    }
  }
});
export default theme;

For most of the components this works fine but for example the icons inside BasicSpeedDial when hover, are not affected. Is this the correct behaviour? Any idea if can I modify the style of these components using createTheme insted of doing manually with sx props? And in general, for the future imported mui components, is there a way to create a global theme for all of them?

I attach a link to codesandbox with a minimal replicable example https://codesandbox.io/s/focused-hugle-w6ir90?file=/src/BasicSpeedDial.js