[CssBaseline] TextField component change size, by adding value inherit to box-sizing property when Text Primary or Background Default color are changed in theme

[danv17]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When you change the color to Text Primary o Background Default properties in theme, the TextField component gets te box-sizing: inherit css property and change inner size of input, where goes the value.
Here a codesandbox that can replicate the bug.

Expected behavior 🤔

Been able to change color to Text Primary or Background Default properties in theme without affecting TextField size component.

Steps to reproduce 🕹

Steps:

In the codesandbox, the first button just create a theme, based on a toggle, with two diffent Primary Main color, so you'll see no change in size on the TextField component.

The second button does the same but with Background Default and Paper color. When you use the theme with the Background Color changed, the input change size, but when you press again, it only change Background Paper color, and the input size it's not changed.

The same work for the third button, but when you press it, it create a theme with Text Primary color changed, and the input change size, but when you press it again, it only change Text Secondary, and the input size it's not changed.

Context 🔦

We are creating this Desing System, and the issue affect the way the user interact with this tool, because when they change a color, it should only change the color, not adding other css properties to other components.

Your environment 🌎

npx @mui/envinfo

  Google Chrome Version 104.0.5112.79 (Official Build) (arm64)
  System:
    OS: macOS 12.5
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: Not Found
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.83 
    @mui/icons-material: ^5.6.2 => 5.8.2 
    @mui/material: ^5.6.1 => 5.8.2 
    @mui/private-theming:  5.8.0 
    @mui/styled-engine:  5.8.0 
    @mui/system:  5.8.2 
    @mui/types:  7.1.3 
    @mui/utils:  5.8.0 
    @types/react: 18.0.1 => 18.0.1 
    react: 18.0.0 => 18.0.0 
    react-dom: 18.0.0 => 18.0.0 
    typescript: 4.6.3 => 4.6.3

[michaldudak]

Thanks for the report. I was able to reproduce it. I found that this issue is caused by ScopedCssBaseline's CSS that is applied near the bottom of all styles. Since .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input (that contains box-sizing: content-box;) and .css-1mq96nu-MuiScopedCssBaseline-root * have the same specificity, the one declared at the bottom wins.

@siriwatknp, @mnajdova, we could use :where(.MuiScopedCssBaseline-root) * instead of .MuiScopedCssBaseline-root * (not the real class name, but you get the idea), to lower the specificity of ScopedCssBaseline's styles to 0,0,0. This, however, is not supported in IE.