(Material UI v5) Global style overrides

Question

There is the Global style overrides example in MUI:

const theme = createTheme({
  components: {
    // Name of the component
    MuiButton: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          fontSize: '1rem',
        },
      },
    },
  },
});

I have the InputLabel component in my code and I want to change its on focused label text color. By default it's #1976d2

The responsible CSS rule is:

.css-1g2sqwz-MuiFormLabel-root-MuiInputLabel-root.Mui-focused {
    color: #1976d2;
}

How can I override it by using that Global style overrides example above?

How can I change the on focused label text color?

The code part below isn't working:

const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        focused: {
          color: 'red',
        },
      },
    },
  },
});

Answer 1

Below is the correct way to target the "focused" state. Overriding the focused styles requires a CSS class combined with Mui-focused in order to get sufficient specificity to override the default styles.

const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: {
          "&.Mui-focused": {
            color: "red"
          }
        }
      }
    }
  }
});