Material-ui: [Typography] Deprecated variants error even though none is used.

[orhunerdem]

Errors show up on browser console after new typography variants are introduced even though none is used.

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

Expected Behavior

No error

Current Behavior

Browser console shows an error says "Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release. Please read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2"

Steps to Reproduce

1. Create new Create-react-app project (non-ejected) with Material UI v3.3.0
2. Use Typography component.

[eps1lon]

Basically any usage of Material-UI without useNextVariants is now deprecated. It's very unlikely that you won't be using any deprecated/restyled variants anyway. See https://material-ui.com/style/typography/#strategies on how to fix this warning.

[orhunerdem]

The behaviour is same when useNextVariants is set too, forgot to mention.

[eps1lon]

On the theme? Could you provide a repro?

[orhunerdem]

const theme = createMuiTheme({
typography: {
    fontFamily: [
        "Roboto",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Arial",
        "sans-serif"
    ].join(","),
    useNextVariants: true
}
});

<MuiThemeProvider theme={theme}>
// Components..
</MuiThemeProvider>

It's a brand new, basic project already.

[eps1lon]

Seems like some issue with your setup: https://codesandbox.io/s/ypvlpmxxlv

[orhunerdem]

It seems if you don't set MuiThemeProvider highest component on the tree, it just doesn't respect useNextVariants property.

According to documentation MuiThemeProvider should preferably be used at the root of component tree however it's not a must. Therefore it shouldn't show up if you don't use deprecated variants, right?

I think there's still an issue.

[oliviertassinari]

@orhunerdem I don't follow. How can we reproduce the issue?

[eps1lon]

@orhunerdem Well yes because every component that is not wrapped in your MuiThemeProvider won't use that theme which results in those components using the default theme which is still using typography v1.

The provider is optional if you don't want a custom theme. But you do want it to fix deprecation warnings.

[orhunerdem]

@oliviertassinari Hey, after typography v2 if you don't use one of the migration options you get a console error about it. It doesn't matter if you use typography component with deprecated variants or not. You get the error/warning.

And even if you do follow the useNextVariants way, there is still another thing to apply which is your theme provider component must be the highest component of your root. It doesn't matter if you use typography components at all. It seems library just warns you to make sure you understand that typography is changed 😄

Also, maybe other components like TextField uses typography inside with v1 unless you set useNextVariants to true thats why it warns anyway.(not sure)

It's just seems odd to me that if you don't use typography v1, you shouldn't get warned. I don't know if its the intentional behavior, not a big deal though.

[eps1lon]

There is the Typography component and then there is the typography in the theme. The latter is used throughout material-ui and it's rare to not use it in some way.

We warn at the theme level so that users enable the feature flag there and at the component level if they explicitly touch affected variants. It should help point to the locations where you need to make a change. It's a tradeoff since 90% of the use cases touch typography in some way.

[...] there is still another thing to apply which is your theme provider component must be the highest component of your root [...]
Why wouldn't you want that though? Every material-ui component not wrapped in the provider won't have access to that theme.

[orhunerdem]

@eps1lon Okay i got it now, thank you. By the way its not that i dont wan't theme provider at highest level. It was the case at that moment, i've fixed it now. There was another wrapper component over it causing this.

[blainegarrett]

I can confirm that as of "@material-ui/core": "^3.7.1" you get the warning even if you are not explicitly using any Typography components whatsoever. That said, the error went away when addinguseNextVariants: true, under the typography when creating the theme as directed.

const muiTheme = createMuiTheme({
  typography: {
    useNextVariants: true,
    fontFamily: ...,
 }
 ...
});

[oliviertassinari]

@blainegarrett You get the warning as soon as you use a custom theme. It's not related to the Typography component because people can do ...theme.typography.body1 for styling their components.

Now, we went with the simplest implementation, we could have used a property getter with a warning.