Can we disable some 'css-' class names that MUI is injecting onto it's components? (Next JS & MUI)

Question

So yesterday, I've just migrated my create-react-app project over to Next JS using the latest version currently out there (12.1.0), following the guide at https://nextjs.org/docs/migrating/from-create-react-app . I am also using MUI still (as before I migrated) using some of the below packages:

"@mui/icons-material": "^5.3.0", "@mui/lab": "^5.0.0-alpha.62", "@mui/material": "^5.3.0",

Apart from ironing out a few of the issues in the last 24 hours, I am coming across a new issue where I have noticed that ALL of my 'MuiButton' components used around my site now contain a new CSS class name (which so far appears to be out of my control and injected on it somehow). For example, a button in my menu navigation now contains css-1w1rijm-MuiButtonBase-root-MuiButton-root (as seen below) at the very end of the class attribute.

<button class="MuiButton-root MuiButton-navigation MuiButton-navigationPrimary MuiButton-sizeMedium MuiButton-navigationSizeMedium MuiButtonBase-root HeaderOptsstyle__OptionButton-sc-pfmh6j-3 elnHDd css-1w1rijm-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" aria-label="my account">

This wouldn't be a problem really if there were no CSS styles being applied to this class name, however that is unfortunately the case. It appears that there are lots of styles being imported from somewhere which is overriding my theme I have set up in my global 'createTheme'.

Already been digging around the web for any reason as to why this has suddenly started happening since the migration, but I'm not seeing any clear reasons here and wonder if anyone can help me to understand this, or what needs to be done to prevent this from interfering with my own styles.

I know this was NOT happening on my CRA before migration as my staging server has not been re-deployed since and it currently does NOT contain any of the 'css-' classes on the same buttons, and the MUI versions have not changed since.

Apologies if I'm lacking any information to help assist with this, but happy to provide any bits if asked.

My package.json dependancies and devDependencies are also seen below.

    "@chec/commerce.js": "^2.8.0",
    "@date-io/date-fns": "^1.3.13",
    "@emotion/cache": "^11.7.1",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.3.0",
    "@mui/lab": "^5.0.0-alpha.62",
    "@mui/material": "^5.3.0",
    "@types/date-fns": "^2.6.0",
    "babel-plugin-styled-components": "^2.0.3",
    "date-fns": "^2.28.0",
    "dotenv": "^8.2.0",
    "embla-carousel-react": "^2.0.3",
    "hex-rgb": "^5.0.0",
    "hex-rgba": "^1.0.2",
    "lodash": "^4.17.21",
    "lodash-webpack-plugin": "^0.11.6",
    "moment": "^2.29.1",
    "next": "latest",
    "react": "17.0.2",
    "react-app-polyfill": "^2.0.0",
    "react-datepicker": "^4.4.0",
    "react-dom": "17.0.2",
    "react-hook-form": "^7.26.0",
    "react-redux": "^7.2.4",
    "react-uuid": "^1.0.2",
    "redux": "^4.1.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "rgb-hex": "^4.0.0",
    "string-strip-html": "^9.1.5",
    "styled-components": "^5.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/preset-env": "^7.12.16",
    "@babel/preset-react": "^7.12.13",
    "@babel/register": "^7.12.13",
    "@svgr/webpack": "^6.2.1",
    "@zeit/next-sass": "1.0.1",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-imports": "^2.0.0",
    "node-sass": "7.0.1"
  },```

Answer 1

The issue is that your styling engine (emotion) and MUI are competing on what styles to apply when a css selector has the same level of specificity. To solve this you need to explicitly setup emotion to prepend the styles so that the stylesheets you write take precedence over MUI. MUI has further instructions here .