Can you overwrite styles in Material UI using css/scss?

Question

At the moment I'm using SCSS, as it is easy to use with NextJS. I really like how this system works, using the SCSS modules, and so I would also like to use it when using Material-UI. Material-UI uses JSS, which is a lot of boilerplate to write every time. Additionally, I prefer not to work with two ways of styling (SCSS modules and JSS). I already changed the order of CSS injection, so that I can use my SCSS modules on Material-UI components. However, I'm wondering if there is a way to overwrite styles of Material-UI components using SCSS modules? I have tried the following and a few similar things, but nothing seemed to work:

import styles from "./Login.module.scss";

import Button from "@material-ui/core/Button";

function Login() {
  return (
    <section>
        <Button className={styles.button} variant="contained" color="primary">
          Verify
        </Button>
    </section>
  );
}

export default Login;

.button {
  padding: 10px;
  margin-bottom: 10px;
  .MuiButton-containedPrimary {
    border: 2px solid red;
    background-color: red;
  }
}

Berzelius

You can't overwrite the material-ui JSS using CSS Modules without changing the build process (if it is even possible). I don't recommend doing this. You can however use the classes prop to override a material-ui className. For example <Button classes={{ root: styles.button }} />. This will remove all material-ui styling though. – Mays

Answer 1

Below is the correct syntax:

.button {
  padding: 10px;
  margin-bottom: 10px;
  &:global(.MuiButton-containedPrimary) {
    border: 2px solid red;
    background-color: red;
  }
}

The example above has two key changes:

1. Using :global(.MuiButton-containedPrimary). Without using :global, CSS modules will transform the MuiButton-containedPrimary into a class name unique to this module and then it won't match what Material-UI puts on the button.

2. Adding the & in front effectively creates a selector like .button.MuiButton-containedPrimary matching an element with both classes on it. Your original syntax would treat .MuiButton-containedPrimary as a descendant selector and only match elements with that class that are a descendant of the button rather than the button itself.

Mllly

Answer 2

You can use makeStyles of @material-ui. And pass to classes to override CSS default of material-ui.

import { makeStyles } from "@material-ui/styles";

const useStyle = makeStyles(() => ({
  root: {
    padding: "10px",
    marginBottom: "10px",
  },
  containedPrimary: {
    border: "2px solid red",
    backgroundColor: "red"
  }
}))

function Login() {
  const classes = useStyle();
  return (
    <section>
        <Button classes={classes} variant="contained" color="primary">
          Verify
        </Button>
    </section>
  );
}

Guenna

Thanks, but I would prefer it if I could use only my SCSS file... Not sure if this is possible. – Berzelius