After successfully migrating my create-react-app project to Next JS using the latest version (12.1.0) and following the migration guide at https://nextjs.org/docs/migrating/from-create-react-app, I encountered an unexpected issue. Despite still using MUI and specific packages like:
"@mui/icons-material": "^5.3.0", "@mui/lab": "^5.0.0-alpha.62", "@mui/material": "^5.3.0",
I noticed that all 'MuiButton' components now possess a new CSS class name appended to their existing classes, such as css-1w1rijm-MuiButtonBase-root-MuiButton-root. This injected class seems to introduce additional styles conflicting with my established theme.
<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">The unintended styling suggests an override from external sources, affecting the application post-migration without concrete reasoning found online. Seeking assistance to comprehend this issue and resolve it to avoid clashes with custom styles.
Prior to migration, the unwanted class names were absent in my CRA setup and unchanged in the staging environment. For further analysis, including package.json dependencies and devDependencies, refer 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", ...</questionbody> <exquestionbody> <div class="question"> <p>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 <a href="https://nextjs.org/docs/migrating/from-create-react-app" rel="nofollow noreferrer">https://nextjs.org/docs/migrating/from-create-react-app</a>. I am also using MUI still (as before I migrated) using some of the below packages:</p> <p>"@mui/icons-material": "^5.3.0", "@mui/lab": "^5.0.0-alpha.62", "@mui/material": "^5.3.0",</p> <p>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 <strong>css-1w1rijm-MuiButtonBase-root-MuiButton-root</strong> (as seen below) at the very end of the class attribute.</p> <p><code><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", "redux": "^4.1.0" ...