Some material-ui component are not affected by createTheme and ThemeProvider

Question

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

Ira

Answer 1

From the docs:

Themed components

You can customize a component's styles, default props, and more by using its component key inside the theme.

The steps to customize a component is:

1. get the component name, in this case is MuiSpeedDialAction
2. find the API page in this case this one
3. get the rule name in the css classes section, in this case fab
4. add the customization to the theme: theme.components.${componentName}.styleOverrides.${ruleName}

Also read how to customise, there you will find how to customize variants like outlined and contained and pseudo selectors like hover and active.

// theme.js
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"
    }
  },
  // HERE
  components: {
    // Component name
    MuiSpeedDialAction: {
      styleOverrides: {
        //  Rule name
        fab: {
          border: "5px solid red",
          "&:hover":{
            backgroundColor:"red",
            color:"red"
          }
        }
      }
    },
  }
});
export default theme;

Pantaloon