Question 209204 in CSS Question posted in
Some basic documentation can be found here.

Unable to overwrite default mui style with custom css

i am unable to overwrite default styles used by Material UI through my custom styles using css , below is the attached code for reference ,Kinldy guide what am i doing wrong or have missed ,Thanks in advance

React code from .jsx file

    import "./StreamDashboard.css";
    import { Button } from "@mui/material";
    const StreamDashboard = () => {
      return (
        <div className="stream_container">
        <Button className="config_button" variant="contained">
        Edit Config
        </Button>
        </div>
      );
     };

    export default StreamDashboard;

CSS code from .css file

    .stream_container {
       height: 100vh;
     }
    .config_button {
      color: black;
      background-color: yellow;
      border-radius: 10px;
      margin-top: 10px;
    }
Tags:

2

Answers


  1. 0

    The way I import styles is like this:

    I Always use *.module.css to avoid class name conflicts

    import styles from "./StreamDashboard.module.css";

    then in code you can do this (for example):

    import styles from "./StreamDashboard.module.css";
import { Button } from "@mui/material";
const StreamDashboard = () => {
  return (
    <div className={styles.stream_container}>
      <Button className={styles.config_button} variant="contained">
        Edit Config
      </Button>
    </div>
  );
};

export default StreamDashboard;

    file StreamDashboard.module.css contains:

    .stream_container {
 /* styles */
}

.config_button {
 /* styles */
}

    So basically you have to import css styles with a name(in above example styles) and then get the classes using styles.css_class_name

    className = {styles.your_css_class_name}

    Hope this helps.

    Login or Signup to reply.
  2. 0

    Give it a shot and append in the end to every style you wanna override !important

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search