Override default theme definitions for material UI theme

Question

In the material UI default theme there exist the (css) class MuiTab-root. Which, among others, sets the font weight (based on the theme's typography definition).

.MuiTab-root {
  font-weight: 600;
}

This is generated by withStyles using createMuiTheme function. During creation it uses typography.fontWeightMedium of the supplied object to define the font weight of the tabs. I wish to do is override the font-weight of the default theme to be "normal". Ideally by stating it should use typography.fontWeightNormal, or failing that, manually overriding the font weight.

I have tried manually overriding the font weight. However this didn't work.

const theme = createMuiTheme({
    typography: {
        fontWeightMedium: 600,
    },
    overrides: {
        '.MuiTab-root': {
          fontWeight: 400,
        }
    }
});

Inspection using chrome shows the fontWeight of tabs is still 600 (demi bold).

How to override the default definition here? - Or do I have to rely on a custom class I use in the components?

user_7495930 · Answer

Here's the correct syntax for the manual override:

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        fontWeight: 400
      }
    }
  }
});

Here's the relevant documentation: https://material-ui.com/customization/components/#global-theme-override

Override default theme definitions for material UI theme

1 Answers