Cannot override fonts with classeNames for Tabs component

Hello,

We cannot find a way to override fonts easily in the Tabs component (or any component actually)… We are using the styled-system package together with styled-components to setup our scales and responsive behavior and everything we implement using material-ui has font sizes 2 times lower than expected. For the tabs component, I found this css:

which I have no idea on how to access it.

Code snippet of our tabs implementation (edited version of https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/tabs/CustomizedTabs.js ):

import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { Grid } from "../ui-grid/ui-grid.component"
import styled from "styled-components"

const Wrapper = styled(Grid)`
  border: 1px solid ${(props) => props.theme.colors.border};
  grid-auto-flow: row;
  min-width: 0px;
`

interface UiTextEventTarget extends EventTarget {
  index?: number
}

interface UiMouseEvent extends React.MouseEvent<HTMLElement> {
  target: UiTextEventTarget
}

const styles: any = () => ({
  root: {
    border: "1px solid #eee",
    backgroundColor: "white",
    fontSize: "16px"
  },
  tabsRoot: {
    backgroundColor: "#eee"
  },
  tabsIndicator: {
    display: "none"
  },
  tabRoot: {
    fontSize: "16px !important",
    textTransform: 'initial',
    minWidth: 72,
    fontWeight: "normal",
    fontFamily: [
      'Roboto',
    ].join(','),
    '&:hover': {
      color: '#40a9ff',
      opacity: 1,
    },
    '&$tabSelected': {
      color: '#1890ff',
      fontWeight: "500",
      borderBottom: "none !important"
    },
    '&:focus': {
      color: '#40a9ff',
    },
  },
  selected: {
    borderBottom: "none !important",
  },
  tabSelected: {
    backgroundColor: "white",
    borderTop: "1px solid #eee",
  }
});

class CustomizedTabs extends React.Component<any> {
  state = {
    value: 0,
  };

  handleChange = (event: UiMouseEvent, value: number) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <Wrapper className={classes.root}>
        <Tabs
          value={value}
          onChange={this.handleChange}
          fullWidth={true}
          classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
        >
          <Tab
            disableRipple={true}
            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
            label="Tab 1"
          />
          <Tab
            disableRipple={true}
            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
            label="Tab 2"
          />
          <Tab
            disableRipple={true}
            classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
            label="Tab 3"
          />
        </Tabs>
        {this.props.children}
      </Wrapper>
    );
  }
}


export const TabbedPanel = withStyles(styles)(CustomizedTabs);

and a screenshot of the result by just calling that component:

Ideally, I wanna be able to call the component in the following way:

<TabbedPanel fontSize={[3, 2, 2]}> ... </TabbedPanel>

With fontSize a styled-system parameter that takes care of various screen sizes.

[adeelibr]

If no one is working on this issue, can I work on this?

[adeelibr]

https://github.com/mui-org/material-ui/pull/12706