I'm using Nextjs with Material UI React I want to change default primary color to other color. I have used below code in 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 >
  )
}

and used it in another component like below in color props.

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

But no any changes. I have done below multiple things to check

I have changed ThemeProvider to MuiThemeProvider

Also tried <ThemeProvider theme={theme}> to <ThemeProvider MuiTheme={theme}>

Also used createMuiTheme instead of createTheme. but here createMuiTheme is deprecated showing in visual studio code.

Also changed from "@material-ui/core/styles" to from "@material-ui/core"

Below is my package.json to see version.

{
  "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"
  }
}

Please help. Thank you.