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

1. Go to the one of yours “overriding” demo - https://codesandbox.io/s/gc1lb?file=/demo.js
2. 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 

[siriwatknp]

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;

[Kaimura]

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…