In my current project, I am developing an application using react and material-ui. The default material-ui components come with a classic blue-grey google style color scheme, but I wanted to customize them with my own colors. To achieve this, I utilized the createTheme() function from mui to define my custom palette:
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;
While this customization worked well for most components, I noticed that the icons within the BasicSpeedDial component were not affected by the hover styling. Is this the expected behavior? I am wondering if there is a way to modify the styles of these components using createTheme() instead of manually adding styles with sx props. Additionally, I am curious if it's possible to create a global theme for all future imported mui components.
For reference, here is a link to a codesandbox showcasing a minimal reproducible example: https://codesandbox.io/s/focused-hugle-w6ir90?file=/src/BasicSpeedDial.js