Estoy creando una aplicación usando reaccionar y material-ui. Los componentes de Material-ui vienen con sus colores de estilo de Google azul grisáceo clásicos personalizados y quiero modificarlos todos con mis personalizados. He usado createTheme() de mui para definir mi paleta personalizada de la siguiente manera:

 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;

Para la mayoría de los componentes, esto funciona bien, pero, por ejemplo, los íconos dentro de BasicSpeedDial cuando se desplaza el mouse, no se ven afectados. ¿Es este el comportamiento correcto? ¿Alguna idea de si puedo modificar el estilo de estos componentes usando createTheme en lugar de hacerlo manualmente con accesorios sx? Y, en general, para los futuros componentes mui importados, ¿hay alguna forma de crear un tema global para todos ellos?

Adjunto un enlace a codesandbox con un ejemplo replicable mínimo https://codesandbox.io/s/focused-hugle-w6ir90?file=/src/BasicSpeedDial.js