Override components like MuiTab that use media queries

Question

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:

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

Answer 1

I solved it by specifying it in the following way:

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

Answer 2

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