CODEWITHSUNDEEP
javascriptreactjsmaterial-uijss
paul23
paul23

Reputation: 9435

Override default theme definitions for material UI theme

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?

Upvotes: 2

Views: 3212

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80986

Here's the correct syntax for the manual override:

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

Edit Tab font weight override

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

Upvotes: 3

Related Questions