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

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 🌎

  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

Start with the linked CodeSandbox's index.tsx and reproduce the issue by toggling the theme colors used with CssBaseline and TextField. Done means changing Text Primary or Background Default colors no longer changes the TextField's size or introduces an unexpected box-sizing value.