Having trouble replacing the default mui style with custom css

Question

Having trouble replacing the default mui style with custom css

I'm having trouble overriding the default styles applied by Material UI with my custom CSS styles. Here's the code I have attached for reference. Can someone please help me figure out what mistake I am making or what I might be missing? Thank you in advance.

Code snippet from React .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;
    }

css reactjs material-ui

Answer 1

Answer №1

My preferred method for importing styles is as follows:

I always use *.module.css to prevent any conflicts with class names

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

Then in the code, you can do something like 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;

The file StreamDashboard.module.css contains:

.stream_container {
 /* styles */
}

.config_button {
 /* styles */
}

In essence, you need to import the CSS styles with a name (in the example above, styles) and then access the classes using styles.css_class_name

className = {styles.your_css_class_name}

I hope this explanation is helpful.

Answer 2

My preferred method for importing styles is as follows:

I always use *.module.css to prevent any conflicts with class names

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

Then in the code, you can do something like 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;

The file StreamDashboard.module.css contains:

.stream_container {
 /* styles */
}

.config_button {
 /* styles */
}

In essence, you need to import the CSS styles with a name (in the example above, styles) and then access the classes using styles.css_class_name

className = {styles.your_css_class_name}

I hope this explanation is helpful.

Answer 3

Answer №2

Try this out and add !important at the end to override any style you need.

Answer 4

Try this out and add !important at the end to override any style you need.

Having trouble replacing the default mui style with custom css

Answer №1

Answer №2

Similar questions

Issue with background repetition in CSS

Has makeStyles caused IconButton hover color not changing in MUI anymore?

"What's up with this hover script? It seems to be malfunction

I am having trouble retrieving the information stored in an Array of Objects. Specifically, I am having difficulty accessing and iterating through each object using a for

Is there a way to simply send the data to the API endpoint without having Django allauth url fetching from react and calling the signup view form?

Encountering a SyntaxError: Unexpected token when trying to run a React application

What sets apart a function that returns JSX from a class component?

What is the best way to trigger a function in React when a constant value is updated?

What is the process for displaying a Bootstrap Icon on a webpage?

JavaScript Cursor-Based Auto Typing Tool

Is it possible to eliminate process.env.NODE_ENV using browserify/envify?

Display a hyperlink within a material ui Drawer

Tips for combining or removing letters from the existing content in an input field for editing todo items in Redux

How can you ensure that an element returns to its original position after being animated in jQuery?

Customize the font style of TextField

Limiting functional component re-renders to only occur when certain states change

What solutions are available to resolve the routing problem in React.js?

Having difficulties adjusting the margin for a JSX element directly within the code

Receiving a sleek black overlay with dynamic text upon hovering over an image

Can a create-react-app be created on a virtual private server (VPS)?