material-ui: MUI5 override does not work as expected - duplications of code

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

In MUI4 I was able to override initial style code. But now in 5 version I can’t get the same behavior.

const theme = createTheme({
  components: {
    // Name of the component
    MuiButton: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          fontSize: '1rem',
        },
      },
    },
  },
});

I am getting result with redundant CSS output code

font-size: 0.875rem; // initial Button value
font-size: 1rem; // my override

Expected behavior 🤔

It must be merged to override but not adds under the bottom

...
font-size: 1rem;

Few weeks ago - I checked your demo page (https://mui.com/customization/theme-components/#global-style-overrides) I noticed (in devtools) that it works as I wanted - but now it has changed behavior

Also, now undefined hack is not working and I do not know how to remove unwanted styles

e.g

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          fontSize: '1rem',
          borderRadius: undefined // removes the `border-radius` in output CSS. works in MUI4
        },
      },
    },
  },
});

Steps to reproduce 🕹

Steps to reproduce

Go to the one of yours “overriding” demo - https://codesandbox.io/s/gc1lb?file=/demo.js
Check Button styles in devtools

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 12.0.1
Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
Browsers:
    Chrome: 96.0.4664.110
    Edge: Not Found
    Firefox: 94.0.2
    Safari: 15.1
npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.63 
    @mui/icons-material: ^5.2.5 => 5.2.5 
    @mui/material: ^5.2.7 => 5.2.7 
    @mui/private-theming:  5.2.3 
    @mui/styled-engine:  5.2.6 
    @mui/styles: ^5.2.3 => 5.2.3 
    @mui/system:  5.2.6 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.3 
    @types/react: ^17.0.34 => 17.0.34 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.4.4 => 4.4.4

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 2
Comments: 19 (9 by maintainers)

Most upvoted comments

The theming does not override via JS object but creates a new stylesheet that leans toward CSS override. This makes pseudo styling possible https://github.com/mui-org/material-ui/issues/26813.

I am getting result with redundant CSS output code

If you don’t want the font-size to appear twice, I suggest to edit theme.typography.button instead.

Also, now undefined hack is not working and I do not know how to remove unwanted styles

Do you have other practical use cases? because in CSS, if you want to reset to the initial value, you should do this:

border-radius: initial;

siriwatknp on Jan 4, 2022

I have the same problem. My global theme styleOverride is getting overwritten by the normal root styling. e.g:

const theme = createTheme({
  components: {
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          fontSize: '1rem',
        },
      },
    },
  },
});

leads to my fontSize being overwritten by the normal root fontSize (which again is overwritten by the media query resulting from the responsiveFontSizes util function but that’s another unrelated story)

So I have no other choice than to use “1rem !important” to make my global theme styleOverride stick…

Kaimura on Mar 23, 2022

also increasing specificity should work…

const theme = createTheme({
  components: {
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          '&.MuiFormHelperText-root': {
            fontSize: '1rem',
          }
        },
      },
    },
  },
});

KROT47 on Jan 29, 2023

Sorry, but it is not what I expect from 5 version. You breakes my workflow. Now my users gets tonns of redundant unusable CSS code. Maybe to you it is normal, but for me - is not.

Do you have other practical use cases?

Believe me - I know CSS very well and I know how to remove css property - but we use CSS-in-JS technology! Why I must receive in result such code?

border-radius: 4px;
border-radius: initial;

I don’t need border radius at all! And border-radius: initial or border-radius: 0 - is not what I need. I need to remove this CSS property at all!

And it is only one of the my use cases. I have many others

People you are going in the wrong way! Please stop this madness. I am very disappointed with your new version of MUI

One suggestion that I see to me now is go to “unstyled” way with @mui/base

OlehDutchenko on Jan 4, 2022

this work for me root: { fontSize: '1rem !important' }

TranLuongTuanAnh on Nov 18, 2022

Probably there are two separate conversations happening here 😃 My sandboxes were more towards the initial comment about how styles are merged and we are shipping unnecessary styles, mostly related to https://github.com/mui/material-ui/issues/30483#issuecomment-1004792181

mnajdova on Jun 3, 2022

Ah yes - I might have only been considering the very latest comments.

Andarist on Jun 3, 2022

While I understand the path of going more to a “CSS way”, the op has a point. By using CSS-in-JS identical selectors could be matched and redundancy removed - optimising the output CSS size.

The current way is harder to debug, since you see multiple entries for the same selector in developer tools, without a clear indication of where it comes from. Shipping a more wasteful code output to users.

I have the very same situation atm. We are building a design system based on MUI. Having a bunch of CSS that doesn’t reflect our styles doesn’t optimal - even if those styles are not visually playing a role for end-users.

hbmuller on Feb 28, 2022