CODEWITHSUNDEEP
reactjssassmaterial-uireact-css-modules
POlsen
POlsen

Reputation: 21

Issue with @Mui and modularized scss competing intermittently. How to consistently override @mui default styling with scss modules?

So I am building on an already existing react app which uses @mui/material components. I have scss modules connected to my javascript components and am importing them like this with the material components..

// STYLE IMPORT
import styles from "./login.module.scss";

// MATERIAL IMPORTS
{other imports}
import Button from '@mui/material/Button';

then when I get to say, my button component I have

<Button
  variant="contained"
  onClick={handleSubmit}
  className={styles.button}
>
  Submit
</Button>

in my App.js I have wrapping around my app like so...

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <CookiesProvider>
         <DndProvider backend={HTML5Backend}>
            **<StyledEngineProvider injectFirst>**
              <App />
            **</StyledEngineProvider>**
        </DndProvider>
      </CookiesProvider>
    </Provider>
  </React.StrictMode>,

  document.getElementById("root")
);

So for example, the issue I'm having with my button is that the default styling for @mui buttons is this dark blue color, I want the button to be a different color. I change it in my scss module, it changes, I confirm that the styling is being applied by looking at chrome dev tools and it is right there. I refresh the page and it persists.

Then I use the navbar to go to a different page and then travel back to the page with my button and it is back to the dark blue color. Check chrome dev tools and my styling is no longer showing up so ".MuiButton-containedPrimary" is reigning supreme.

If I were to edit the styling via VS code to where the component re renders my styling will generally pop up but as soon as I navigate away from the page it disappears again. I don't know why my styling is not appearing on page reload.

Doing !important does work but I have to do it to every single styling which is a PITA and I'm assuming I'm just getting something fundamentally wrong.

This is only one example of this issue, I'm unfortunately experiencing it primarily with forms and buttons while Mui components like AppBar I had no problem overriding the default styling. I've poured over documentation and watched tutorials on modularizing css and scss files and cannot figure out what I am doing wrong here and why injectFirst is not working as intended on some components.

Any insight would be greatly appreciated, I'm trying to keep my logic and styling separate so I really want this to work out for me and would rather do in-js styling.

list of my dependencies

"dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.5",
    "@mui/material": "^5.0.0",
    "@mui/styles": "^5.2.3",
    "@mui/x-data-grid": "^5.2.2",
    "@reduxjs/toolkit": "^1.7.1",
    "react": "^17.0.2",
    "react-cookie": "^4.1.1",
    "react-dnd": "^14.0.3",
    "react-dnd-html5-backend": "^14.0.1",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.4.2",
    "react-error-overlay": "^6.0.10",
    "react-native": "^0.65.1",
    "react-redux": "^7.2.5",
    "react-router-dom": "^6.2.1",
    "react-scripts": "^5.0.0",
    "sass": "^1.48.0"
  },

**EDIT: Figured out what the issue was, I needed to import my style modules after the material imports so it looked like this

// MATERIAL IMPORTS
{other imports}
import Button from '@mui/material/Button';

// STYLE IMPORT
import styles from "./login.module.scss";

Upvotes: 2

Views: 1424

Answers (1)

Sabrina Tolmer
Sabrina Tolmer

Reputation: 5509

Change the CSS injection order.



    <StyledEngineProvider injectFirst>
              <App />
    </StyledEngineProvider>

This simple configuration works for my project.

import * as React from 'react';
import { StyledEngineProvider } from '@mui/material/styles';

export default function GlobalCssPriority() {
  return (
    <CssBaseline />
    <StyledEngineProvider injectFirst>
      {/* Your component tree. Now you can override MUI's styles. */}
    </StyledEngineProvider>
  );
}

Also, double-check which notations are you using to cal the modulus in your components.

import classes from './MyComponent.module.scss';

<MyComponent className={classes.MyStyle}/>

<MyComponent MyComponent={classes["my-style"]}>

Upvotes: 2

Related Questions