Unable to override default styles with custom styles in React MUI 5

Question

Unable to override default styles with custom styles in React MUI 5

I've been attempting to replace the default MUI 5 Button styles with my custom styles using either withStyles or a className (created using makeStyles), but I'm running into an issue where the default styles take precedence over my custom ones. I managed to address this problem with withStyles by including those styles in the global style overrides when defining the theme, but the className-based approach is proving problematic.

Does anyone know how to resolve this? Below are some screenshots illustrating the strange behavior.

Edit: Here's the code used to define the custom styles:

import { Theme } from '@mui/material';
import { makeStyles } from '@mui/styles';

const BTN_WIDTH = 160;
const BTN_MIN_HEIGHT = 34;

export default makeStyles((theme: Theme) => ({
  btn: {
    width: BTN_WIDTH,
    minHeight: BTN_MIN_HEIGHT,
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(2),
  }
}));

https://i.sstatic.net/A1943S8J.png
^ A screenshot revealing the button styles in question. (Some default styles were excluded for brevity). The screenshot demonstrates how the default styles are overriding the paddings specified by the custom styles.

css reactjs material-ui makestyles

Answer 1

Answer №1

It appears that your class is being overridden due to having the same specificity as the MUI classes. You have three options to address this issue.

Reverse the order of imports: Your class is being overridden because it has the same specificity and is imported after the MUI import. This option may be challenging to implement as managing imports can be complex.
Add !important to all properties in your class (e.g: width: 100px !important). This approach is considered unclean and not recommended.
Utilize specificity to your advantage by applying a higher-specificity class. For example, you could use a CSS rule like the following:

div {
  width: 100px;
  height: 100px;
}

.custom-div {
  background: red;
}

.important-div {
  background: black;
}

.important-div#very-important {
  background: green;
}

<div class="custom-div important-div" id="very-important"/>

In this example, despite the background property being defined multiple times, the rule with the highest specificity takes precedence (such as the one with an ID).

Answer 2

It appears that your class is being overridden due to having the same specificity as the MUI classes. You have three options to address this issue.

Reverse the order of imports: Your class is being overridden because it has the same specificity and is imported after the MUI import. This option may be challenging to implement as managing imports can be complex.
Add !important to all properties in your class (e.g: width: 100px !important). This approach is considered unclean and not recommended.
Utilize specificity to your advantage by applying a higher-specificity class. For example, you could use a CSS rule like the following:

div {
  width: 100px;
  height: 100px;
}

.custom-div {
  background: red;
}

.important-div {
  background: black;
}

.important-div#very-important {
  background: green;
}

<div class="custom-div important-div" id="very-important"/>

In this example, despite the background property being defined multiple times, the rule with the highest specificity takes precedence (such as the one with an ID).

Unable to override default styles with custom styles in React MUI 5

Answer №1

Similar questions

What are the reasons behind the inability to import an image file in Next.js?

Concealing a hyperlink depending on the value chosen in a dropdown menu

Changing the Title of UI Tabs

Damaged background in Bootstrap interface modal

choose a selection hopscotch

When viewed on a mobile device, the entire HTML document is resized to occupy less than half of the

Error occurs when attempting to clear the cache storage

What could be the reason for the useEffect return function to execute before the previous function call?

Concealing information based on the value of a variable

Exploring the functionality of using getStaticProps in conjunction with the next-redux

Unable to find the designated ./uploads directory while attempting to upload a file in Express JS

Reactjs is failing to display the page

Importing filter function from Material UI to use in the AutoComplete component

Is it possible to load images top to bottom?

Why do I receive a URL like this when attempting to download a video from YouTube?

Guide to expanding the sidebar width

Is it possible to modify an HTML element when hovering over it in an ASP.Net page?

Ways to apply distinct styles to various ids and common classes

New Feature in Bootstrap4: Navigation Bar Alignment Shift to the Left

How can I locate the CSS selector for a text message?