CODEWITHSUNDEEP
cssreactjsmaterial-ui
Pavel Ermakov
Pavel Ermakov

Reputation: 43

(Material UI v5) Global style overrides

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',
        },
      },
    },
  },
});

Upvotes: 4

Views: 7169

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81156

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"
          }
        }
      }
    }
  }
});

Edit InputLabel focused

Upvotes: 11

Related Questions