Overriding font family doesn't change the some of components font family

[Bani]

Hello, It seems that overriding fontFamily's theme doesn't change the some of components font family for me.

const customTheme = {
  ...theme,
  fontFamily: 'Consolas',
}

<ThemeProvider theme={customTheme}>
      <React.Fragment>
        <GlobalStyle />
        <Typography variant="h1">I'm consolas</Typography>
        <Typography as="span">I'm font set in global</Typography>
        <Button>Still font set in global</Button>
      </React.Fragment>
</ThemeProvider>

[Greg Bergé]

Hello @xbrny, can you provide a reproducible example on CodeSandbox for and example? Thanks!

[Bani]

Here's the CodeSandbox: https://codesandbox.io/s/xo2vn69y8q

I expect the the root font family gonna change to 'Consolas' or at least Button and Typography component to use the new overridden font (Consolas)

[Greg Bergé]

OK I see what is your problem, for now globalStyle accepts a theme property:

const GlobalStyle = createGlobalStyle`${globalStyle(customTheme)}`;

It will not be the case any more with next version (supporting emotion 10), but for now it still requires (even if you don't use emotion).

Thanks for your repro it helped a lot!