Material-ui: Typography deprecration warning when using Drawer component, temporary or persistent variants

[jonabantao]

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

Expected Behavior

No warnings.

Current Behavior

Warning via the browser's console

Steps to Reproduce

Add the Drawer component and choose either the 'temporary' or 'persistent' variants. Both will show the console warning in the browser.

Context

It's not a big issue but just wanted to bring up that trying to use either variant listed above will cause the typography deprecation warning to pop up:

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

The permanent variant displays no warnings.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.2.2 |
| React | v16.6.0 |
| Browser | Affected Firefox and Chrome |

[eps1lon]

No warnings.

That is exactly what we don't want. It is explained in https://material-ui.com/style/typography#migration-to-typography-v2

[jonabantao]

Definitely. But I was curious as to why these two variants would cause the warnings to pop up. I do have some Typography components but they're following the naming style for Typography v2 (h6, subtitle1, etc).

Is there something that these two variants have internally that would cause the warning to come up?

[eps1lon]

We log this preemptively on theme creation to helper users find the parts of their code they have to fix. It might be that none of your components actually touch typography although very unlikely (e.g. TextField is not touching any typography). But you have to remember that those warnings are not just about new variants and the ones that will be removed. Some variants will also have a changed styling. For those it is important that you actually set useNextVariants on the theme.

So yes the Drawer itself is not using typography but the most common use case has List inside Drawer and List does touch typography.

[oliviertassinari]

@eps1lon At some point, I considered the following: only warn about the updated typography when actually using the typography component. This would increase the DX and reduce people confusion.
The main feature of the current implementation is it's simplicty. But I guess we could simplify that.

[tjaskula]

How do we fix the warning? I have currently migrated everything to Typography V2 like @jonabantao but still see the warning that is caused by the Drawer variant="temporary" and permanent. Seeing the warining all the time I'm not sure if I fixed everything or if there is something leftto fix. Very confusing

[oliviertassinari]

@tjaskula Are you using a custom theme? Did you set the typography use next variant flag?

[tjaskula]

I have both cases. When using createTheme is set the flag to true.
The second case is when I render for example TableCell without the theme, and I'm getting the warning too.
What are conditions that the warning is popping up ?

[oliviertassinari]

@tjaskula Are you using the latest version? It would be great to have a reproduction example :)

[eps1lon]

What are conditions that the warning is popping up ?

Every time you use a theme that is not using the new variants (which you implicitly already do when you only use the components). You need to move the theme provider to the top of your component tree or at least have a theme provider at the top with the new variants.

[tonymckendry]

So when using a custom theme at all we should expect to see this console warning at all times? For me it fires every time I do anything in my app to cause a rerender and overtakes my entire console. Is there any way to disable this? I have a fresh app with nothing besides a Bottom Navigation in place so there is no typography even being used and I am still seeing the warning.

[eps1lon]

@tonymckendry If it's new you can simply enable the new typography as described in https://material-ui.com/style/typography/#migration-to-typography-v2.

You are using typography with BottomNavigation since that uses Button which uses the button typography variant. That's why I said it's unlikely that you don't touch typography when using a single component.

[oliviertassinari]

I do anything in my app to cause a rerender and overtakes my entire console.

@tonymckendry What version of Material-UI are you using? It something we have fixed in the latest versions.

[tonymckendry]

@oliviertassinari I had updated to 3.4.0 right before I posted this hoping that maybe the warning would have gone away or changed since 3.3.2.

However, despite reading this thread I did not see that I needed to add the useNextVariants option into my themes, as pointed out in the guide linked by @eps1lon which seems to have made the warnings go away.

[mynameistechno]

I have updated the variants and added useNextVariants and the warnings in the console went away, however I still see the warning when running tests.

[gerhat]

I also was seeing the warnings when running tests so I added the following in my setupTest.js
window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;

[wkerswell-gresham]

So reading through the thread it does make sense to show it all the time but for me I thought I hadn't update all the variants and spent a while looking through my codebase trying to work out my error. Might be worth putting something in the docks just so people aren't hunting for the missing error like me.

[hutch120]

Just wanted to note a strange issue on a legacy app I'm converting to react in case someone else comes across this. I added window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true; per the doco to the entry point of my react application, but it didn't have any affect... so I ended up having to add it to index.html in a script tag, like this:

<html>
  <head>
     ...
    <script>
      window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true
    </script>
  </head>
  <body>
   ...
  </body>
</html>