Can't Override Global Typography

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I should be able to modify the typography through the overrides and see purple text with a different fontfamily for all text in my application

Current Behavior

No change in color occurs or fontFamily

Steps to Reproduce (for bugs)

https://codesandbox.io/s/8444zvr28j

1. Use createMuiTheme with object:

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      root: {
        fontFamily: "Product Sans"
      },
      colorPrimary: purple
    }
  }
});

Context

I’m working on a side project using MuiTable, and all the fonts are defaulted to Roboto 😦

I am using react-starter-kit and have imported fonts using webpack

Your Environment

Tech	Version .
Material-UI	1.0.0-beta.36
React	16.2.0
browser	Chrome 64 .

[oliviertassinari]

@mrmadhat Both approaches should work:

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      h1: {
        '&.MuiTypography-gutterBottom': {
          marginBottom: 7,
        },
      },
      h2: {
        marginBottom: props => (props.gutterBottom ? 20 : null),
      },
    },
  },
});

But notice that the “h2” approach is significantly slower, at least, until we solve a core issue with the styling solution.

[mrmadhat]

@oliviertassinari thankyou for your help, what I have now is:

export const GlobalCss = withStyles({
	'@global': {
		'.MuiTypography-h1.MuiTypography-gutterBottom': {
			marginBottom: baseTheme.spacing(5)
		},
		'.MuiTypography-h2.MuiTypography-gutterBottom': {
			marginBottom: baseTheme.spacing(3)
		}
	}
})(() => null);

Which works as expected, is there a better way to accomplish this? Could you possibly provide an example?