[MuiOutlinedInput]: Unable to override css properties for notchedOutline when focused (Mui v5 theme)

[galzo]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Create a MuiOutlinedInput component with notched property set to true
2. Try to override the borderWith property of the internal fieldset element when the component is focused, using Mui v5 theme
3. The borderWidth will not get overriden.

Current behavior 😯

In Mui v4, I could easily bypass the style props of the notchedOutline when in focus mode, using a theme object such as: MuiOutlinedInput: { root: { '&$focused $notchedOutline': { borderWidth: '1px' } } }

but in Mui v5, I can't manage to change the style props when the notchedOutline is in focus mode. MuiOutlinedInput: { styleOverrides: { root: { '& .MuiOutlinedInput-notchedOutline.Mui-focused': { borderWidth: '1px', }, }, }, }, The following theme object doesn't override the borderWith.

The strange part is that a selector that does not contain the.Mui-focused property will work: MuiOutlinedInput: { styleOverrides: { root: { '& .MuiOutlinedInput-notchedOutline': { borderWidth: '1px', }, }, }, }, but the border will remain overriden until it gets back to focus mode.

Expected behavior 🤔

The MuiOutlinedInput Border width should by overriden when in focus mode.

Context 🔦

I'm using the OutlinedInput component as an input field. the default borderWidth of the component (when in focus mode - 2px) doesn't match our styling, so I want to override it to 1px. In MUI v4 it worked without a problem, but in MUI V5 it doesn't seem to work.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.5
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 105.0.5195.125 << That's the browser I'm using
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6
  npmPackages:
    @emotion/react: ^11.10.4 => 11.10.4 
    @emotion/styled: ^11.10.4 => 11.10.4 
    @mui/base:  5.0.0-alpha.95 
    @mui/core-downloads-tracker:  5.10.3 
    @mui/icons-material: ^5.10.3 => 5.10.3 
    @mui/lab: ^5.0.0-alpha.97 => 5.0.0-alpha.97 
    @mui/material: ^5.10.3 => 5.10.3 
    @mui/private-theming:  5.10.3 
    @mui/styled-engine:  5.10.3 
    @mui/styles: ^5.10.3 => 5.10.3 
    @mui/system:  5.10.3 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.3 
    @types/react: ^18.0.18 => 18.0.18 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ~4.7.2 => 4.7.4 

[ZeeshanTamboli]

Please provide a CodeSandbox reproducing the issue. The issue template is a good starting point.

Also, make sure you are increasing the specificity to target .Mui-focused class since they are styled with a higher specificity. See state classes docs.

Also check that there is no warning in the browser console explaining it.

[Bearfinn]

Note: If you want to just remove the notch while focusing, just set MuiOutlinedInput.defaultOverrides.notched: false

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.