Material-ui: Failed prop type: "deprecatedVariants" is read-only in Typography

[jimmycarlinco]

Just updated to v3.2.1 and am getting the following error in console:
Failed prop type: "deprecatedVariants" is read-only in Typography (created by WithStyles(Typography))

Any ideas?

• [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.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.2.1 |

[jimmycarlinco]

Failed prop type: "deprecatedVariants" is read-only in Typography (created by WithStyles(Typography)) in WithStyles(Typography) (created by FormControlLabel) in label (created by FormControlLabel) in FormControlLabel (created by WithStyles(FormControlLabel)) in WithStyles(FormControlLabel) (created by CreateTaskBase)

[bluepeter]

Also getting this for a seemingly benign use of Typography.

[biggreenbubble]

update typography variant

[bluepeter]

@biggreenbubble what do you mean?

[dandro32]

Too update variants follow this instruction:

https://material-ui.com/style/typography/#migration-to-typography-v2

However I have updated variants and still got this issue.

[bluepeter]

Likewise.

[wilcoschoneveld]

+1

[shmilyoo]

+1
I changed old variant to new ,but this warning is still in console.
And api document for typography is old too

[eps1lon]

We located the issue and have a potential fix pending for review. Please don't spam this thread with "+1". This just floods notifications for everyone subscribed to this issue. You can use the reactions feature instead.

[oliviertassinari]

The upstream issue should be fixed with https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types/pull/167. We need to release it now.

[JulianPovedaM]

can not solve the problem, the console continues to indicate the following warning:

Warning: Failed prop type: "deprecatedVariants" is read-only....

could you help me please? #Thanks..

[eps1lon]

@JulianPovedaM The fix is not released yet. We can't offer a solution other than manually editing your node_modules.

One solution could be to clone, build locally and link in your app since the fix in the babel plugin is already released. But please don't ask in this thread how to do this. This is out of scope for this issue.

[eddiemonge]

Will this go out in a patch release or in 3.4.0? If it's a patch release, any time frame estimates?

[oliviertassinari]

Thank you for the patience, v3.2.2 was released, let us know if it's all good :).

[bluepeter]

Fixes it for me! Great turnaround!

[remingtonchan]

All good on my side too!

[lipe-dev]

I had 3.2.1 that I installed yesterday, and got here from a google search to find out that 3.2.2 is out! First time I get to an issue right as it gets fixed! Good Job.

[jraoult]

@oliviertassinari I'm actually confused here. I get the same warning and in spite of the 3.2.2 it still shows:

const theme = createMuiTheme({
  typography: {
    useNextVariants: true
  },
  palette: {
    primary: {
      main: "#50c9c3",
      light: "#87fcf6",
      dark: "#009893",
      contrastText: "#000000"
    },
    secondary: {
      main: "#80d8ff",
      light: "#b5ffff",
      dark: "#49a7cc",
      contrastText: "#000000"
    }
  }
});

I had a look at the code: here:https://github.com/mui-org/material-ui/blob/b895ee783b13a50d4ab0a92c2ea15c2ff7f1e8ae/packages/material-ui/src/styles/createTypography.js#L38

It seems that calling createTypography (called by createMuiTheme) will always yield this warning once useNextVariants is set to true which per https://material-ui.com/style/typography/#migration-to-typography-v2 is recommended. Am I missing something?

EDIT: did I get the guide wrong? I actually updated all my styles manually throughout the app to use the new variant (ie. replacing subheading by subtitle1 etc.). Am I supposed to set the flag in this case or is it supposed to be the other way around?

[eps1lon]

@jraoult Please post the warning message.

The warning message in the code you linked will only trigger if the condition is false.

[jraoult]

~@eps1lon right, my bad it is because suppressWarning is false actually. But now I'm under the impression (if the code is right) that I misunderstood the migration guide. If I migrated the styles manually I don't have to set useNextVariants.~

EDIT: @eps1lon hmm. I probably spoke to fast. I can't see the message anymore. I wonder if my yarn cache was off.

[sepehr1313]

@oliviertassinari I'm having an error while using Typography and it's saying Cannot read property 'useNextVariants' of undefined. I'm not using material-ui theme. I've set my own theme using another package and also written window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true; inside my HTML page.
Seems there's a condition inside Typography.js that doesn't check null refrence for theme.

[eps1lon]

We require for the theme to have a certain shape. If a 3rd party package wants to create themes for this library it should match the shape. Full shape: https://github.com/mui-org/material-ui/blob/994c376bb2d07d70b67182be60afd4ad7e247478/packages/material-ui/src/styles/createMuiTheme.d.ts#L30-L43