CODEWITHSUNDEEP
reactjssassmaterial-uinext.jsjss
round_circle
round_circle

Reputation: 995

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

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;
  }
}

Upvotes: 5

Views: 8147

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 80996

Below is the correct syntax:

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

Edit SCSS modules

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.

Upvotes: 9

Viet
Viet

Reputation: 12787

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>
  );
}

Upvotes: -2

Related Questions