Estoy usando Nextjs con Material UI React . Quiero cambiar el color primario predeterminado a otro color. He usado el siguiente código en app.js

 import Layout from '../components/layout' import '../styles/global.css' import { createTheme , ThemeProvider } from "@material-ui/core/styles"; const theme = createTheme({ palette: { primary: { main: '#00ab55', }, secondary: { main: "#00ab55" } } }); export default function MyApp({ Component, pageProps }) { return ( <ThemeProvider theme={theme}> <Layout> <Component {...pageProps} /> </Layout> </ThemeProvider > ) }

y lo usé en otro componente como a continuación en accesorios de color.

 <TextField className="num_input_field" color='primary' placeholder="phone number" inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} /> <Button variant="contained" color="primary">Go</Button>

Pero no hay cambios. He hecho a continuación varias cosas para verificar

He cambiado ThemeProvider a MuiThemeProvider

También probé <ThemeProvider theme={theme}> a <ThemeProvider MuiTheme={theme}>

También usé createMuiTheme en lugar de createTheme. pero aquí createMuiTheme está en desuso y se muestra en el código de Visual Studio.

También cambió from "@material-ui/core/styles" a from "@material-ui/core"

A continuación se muestra mi paquete.json para ver la versión.

 { "name": "xyz", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@material-ui/core": "^4.12.3", "@mui/icons-material": "^5.0.1", "@mui/material": "^5.0.2", "next": "11.1.2", "react": "17.0.2", "react-dom": "17.0.2", "react-flags-select": "^2.1.2", "sass": "^1.42.1" }, "devDependencies": { "eslint": "7.32.0", "eslint-config-next": "11.1.2" } }

Por favor ayuda. Gracias.