Me gustaría cambiar el color primario y secundario de Material UI. Sin embargo, los colores no se aplican a los controles, por ejemplo, Buttons o Fab. Los colores predeterminados todavía se utilizan. ¿Qué echo de menos aquí?
índice.js
/* Material UI */ import { ThemeProvider, createTheme } from '@material-ui/core/styles'; const theme = createTheme({ palette: { primary: { main: "#e91e63", contrastText: "#fff" }, secondary: { main: "#03a9f4", contrastText: "#fff" } } }); ReactDOM.render( <React.StrictMode> <LoadingProvider> <ToastContainer toastClassName="dark-toast" position="bottom-center" /> <BrowserRouter> <ThemeProvider theme={theme}> <App /> </ThemeProvider> </BrowserRouter> </LoadingProvider> </React.StrictMode>, document.getElementById('root') );Cualquiera.js
<MUI.Fab color="primary" aria-label="add" onClick={() => setShowFileAdd(true)}> <span className="material-icons"> add </span> </MUI.Fab> Si usa una versión anterior de Maretial-ui: intente envolver su componente raíz con MuiThemeProvider en su componente de aplicación
// App.js import { createTheme, MuiThemeProvider } from '@material-ui/core/styles'; import Root from './Root'; const theme = createTheme({ palette: { primary: { main: "#e91e63", contrastText: "#fff" }, secondary: { main: "#03a9f4", contrastText: "#fff" } } }); function App() { return ( <MuiThemeProvider theme={theme}> <Root /> </MuiThemeProvider> ); }Si usa una nueva versión de Material-ui ( MUI ):
import { createTheme, ThemeProvider } from '@mui/material/styles'; .... function App() { return ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> ); }El tema era un poco extraño. Tuve que reemplazar la importación a:
import { createTheme, ThemeProvider } from '@mui/material/styles';