[TextField] Style overrides for `MuiFilledInput` focused key are not being applied

[badalsaibo]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Overriding focused CSS style via styleOverrides to have a backgroundColor: "yellow" isn't working.

The focused key has the description

State class applied to the root element if the component is focused.

export const themeConfig = {
  components: {
    MuiFilledInput: {
      styleOverrides: {
        root: {
          backgroundColor: "green"
        },
        focused: {
          backgroundColor: "yellow"
        }
      }
    }
  }
};

Meaning if the input is focused, the styles present on the focused key should be applied to .Mui-focused class.

However, the styles are not applying.

CodeSandbox

Expected behavior 🤔

Expected focused key values to be applied on .Mui-focused class too!

Steps to reproduce 🕹

Steps:

1. Add values to the focused key on styleOverrides property for MuiFilledInput
2. Focus the filled TextInput component.
3. Focused styles are not being applied.

CodeSandbox showing the behaviour.

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

`Browser: Chrome Version 99.0.4844.84 (Official Build) (64-bit` ``` System: OS: Windows 10 10.0.19042 Binaries: Node: 16.6.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD npm: 7.20.3 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 99.0.4844.84 Edge: Spartan (44.19041.1023.0), Chromium (99.0.1150.55) npmPackages: @emotion/react: ^11.8.2 => 11.8.2 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.71 @mui/material: ^5.5.0 => 5.5.0 @mui/private-theming: 5.4.4 @mui/styled-engine: 5.4.4 @mui/system: 5.5.0 @mui/types: 7.1.2 @mui/utils: 5.4.4 @types/react: 17.0.40 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: 4.6.2 ```

[ivan-ngchakming]

Would this solve your issue?

export const themeConfig = {
  components: {
    MuiFilledInput: {
      styleOverrides: {
        root: {
          backgroundColor: "green",
          "&.Mui-focused": {
            backgroundColor: "yellow",
          }
        },
      }
    },
  }
}

[badalsaibo]

@ivan-ngchakming It works, but the issue is specific with the behavior. I'd like to know why the styles aren't even being applied in the first place.

[siriwatknp]

@ivan-ngchakming It works, but the issue is specific with the behavior. I'd like to know why the styles aren't even being applied in the first place.

The doc API is quite ambiguous but if you see it mentions about state class, you should style the element with a class selector (the @ivan-ngchakming solution is the correct one).

For more details about state classes, check out the doc https://mui.com/customization/how-to-customize/#state-classes.