CODEWITHSUNDEEP
cssmaterial-ui
Bennit
Bennit

Reputation: 428

Override components like MuiTab that use media queries

I'm trying to provide CSS overrides for MuiTab to increase the font-size.

Using the documentation about CSS overrides on material-ui I've managed to increase font size for most elements, however I got stuck at elements that use media queries as they produce more specific CSS rules than the ones I provide with my overrides.

theme.ts :

import { createMuiTheme } from '@material-ui/core';

const fontSizeStyle = {
  fontSize: '1rem',
};

const fontFamilyStyle = {
  fontFamily: '"Ubuntu", sans-serif'
};

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        ...fontFamilyStyle,
        ...fontSizeStyle,
      },
      label: fontSizeStyle,
    },
  }
});

export default theme;

This produces following css rules applied to a MuiTab:

muitab override example

The rule is generated by the following file:

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tab/Tab.js

[theme.breakpoints.up('md')]: {
  fontSize: theme.typography.pxToRem(13),
},

Does anyone have an example how to override this media query using createMuiTheme function? I don't have the breakpoints, so perhaps I need to specify breakpoints as well to be able to use them in my overrides

Kind regards

Upvotes: 17

Views: 10148

Answers (4)

shiva
shiva

Reputation: 3941

I also faced the same issue. I read the docs about Breakpoints and find a way for this situation but I find it kinda ugly as I have to apply the overridden styles in each Tab using classes property.

Note: I don't know the solution for this problem using createMuiTheme function

Apply the style to the breakpoints style. In this case,

const styles = theme => ({
  mediaFont:{
    [theme.breakpoints.up('md')]: {
     fontSize:fontSizeStyle.fontSize,
    },
  },
  });

Apply the above style to TabLabel 

<Tab label="Item One" classes={{label:classes.mediaFont}} />

Upvotes: 1

Musyoka Morris
Musyoka Morris

Reputation: 261

Specify it as follows

let theme = createMuiTheme({});

theme = {
  ...theme,
  overrides: {
    MuiTab: {
      root: {
        [theme.breakpoints.up("xs")]: {
          minHeight: 10
        }
      }
    }
  }
}

export default theme;

theme.breakpoints exposes four helper methods to create CSS media queries:

  • theme.breakpoints.up(key)
  • theme.breakpoints.down(key)
  • theme.breakpoints.only(key)
  • theme.breakpoints.between(start, end)

Where each key is a breakpoint and matches with a fixed screen width. Allowed key values are xs|sm|md|lg|xl

See material-ui docs for more info

Upvotes: 12

Oren
Oren

Reputation: 301

I solved it by specifying it in the following way:

    MuiTab: {
      root: {
        minWidth: 0,
        '@media (min-width: 0px)': {
          minWidth: 0
        }
      }
    }

Upvotes: 23

Andrew Hows
Andrew Hows

Reputation: 1438

CSS has a mechanism for forcing a less specific rule to override a more specific one: !important.

const fontSizeStyle = {
  fontSize: '1rem !important',
};

Upvotes: -1

Related Questions