-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Typography Migration Error on TextField #13175
Comments
How did you try to resolve them? Have you read https://material-ui.com/style/typography/#migration-to-typography-v2? |
I think that we could improve the current situation in two ways:
|
I had a lot of Display# in my code, so I just did some search and replace to h#. All of the errors disappeared after I did that, but then they started to appear as soon as I typed into a TextField. |
I am seeing this issue also (typing in a TextField - I don't see the same issue when typing in an Input), though I'm not directly using variants or Typography or Themes. |
I'm seeing a lot of typography variant warnings for things I don't control. I updated all my uses of Typography, but I still get a ton of them, I think, as a result of Material UI components that internally use Typography. Finding the source is difficult because the trace for these warnings just takes me into the react-dom.development.js dispatch calls and never reveals the original component calling render() that causes this. |
I see that withStyles calls createMuiTheme (to create the default) without specifying useNextVariants - could this be the issue? |
Just removing deprecated variants is not enough. You have to use a theme in your app that enables the typography v2 theme like so: const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
}); A more detailed guide is available under https://material-ui.com/style/typography/#migration-to-typography-v2. Otherwise you would still get old styles for variants like |
Isn't "you have to use a theme" a breaking change too? |
@kitfit-dave You only have to use it if you want to use the new feature. The warnings are "harmless". Please don't immediately jump on me. I know that they don't seem harmless and in dev mode your app becomes basically not debuggable with all that noise. That's why we also added the MUI_SUPRRESS_DEPRECATION_WARNINGS via env variable escape hatch. That's a decision we have to make. Do we enable deprecation warnings by default (which is recommended by semver) or not. As @oliviertassinari said we can improve our warnings in general by providing component stack and rate limit those warnings but I fear the rate limit is another area where you can only make mistakes. |
Yes lol the warnings are annoying because they're in red and not in yellow. The new typography look (especially variant='overline') look gangsta though, love it. I used this for now to make them disappear, hopefully I won't forget to remove em on next package update:
|
Fair enough. Did not intend to jump on you :) It just seemed odd to me that the lib itself would cause deprecation warnings. I see that you'd be in a hard place making the default use the new variants by default. I suppose then that a future major version change will add the useNextVariants to any internally created themes? A solution that I could see being useful would be to suppress the warnings for themes that the lib is creating itself? As the end user can't really fix those... or maybe that is just in my case as I am just accepting the default themes. And as you have rightly identified, it basically makes the app non debuggable with all the warnings flying. (And I'd personally prefer that to wrapping my app in a theme provider and creating a theme for no other reason than silencing warnings) |
@davalapar When using typography v2 you should not need to suppress the warnings because you are good to go for the next major concerning typography. There is only one bug in @kitfit-dave What do you mean by not fixable? The guide offers two solutions. We warn because we will default to v2 in the next major which introduces changes in the style which can potentially break your apps layout. You don't have to fear some perf penalty for passing a theme. That is already done internally. |
What I mean is, I am not currently using a theme. I would have to create one and pass it in with a provider. This seems like quite a big change just to silence the warnings. Perhaps it's not... Though it is a change that I would then revert once the internal themes are created with the new variants. |
Pardon me but the typo migration page clearly states that body1 is not deprecated which is why I don't understand the warning. New variants: |
@andrispraulitis It will change its style. The warning should say that. |
@eps1lon first of all, thank you for your help with this. It's very much appreciated. I think it would make sense to only raise these warnings once per variant. The warning basically says, "hey, this variant isn't supported anymore!" so it would, in my opinion, be fair to report it per-variant and not per-render. Greatly appreciate the |
Here's an example of how to make a custom Mui theme that passes in the override config: import React from 'react';
import { render } from 'react-dom';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Root from './Root';
const theme = createMuiTheme({
typography: {
useNextVariants: true,
suppressDeprecationWarnings: true
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<Root />
</MuiThemeProvider>
);
}
render(<App />, document.querySelector('#app')); I found this to be the easiest way to address this issue and move on for now. |
I find it a little frustrating that restyle warnings and removal warnings are both under the same suppression flag. I'd like to be aware of any instances of future breaking changes, but I've already gone through my code and prepped it for restyle changes, I don't need to see those anymore, or wade through them to find actual problem code. |
We will make a v3.2.1 release this evening with a better upgrade path leveraging everybody feedback. |
Using the |
I followed the instructions for migration but apparently there is still something not migrated but I can't find it. I have Is there any way the deprecation error can say where the problem is occurring? At this point, I'm at a loss as to what hasn't been migrated yet. |
@brennancheung Some tips:
It should be enough. |
even though i changed all the variants to the new ones, and i set Edit: If anyone having the same issue, it gotta be like this: const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
}); |
I am using a theme currently, and I have EDIT: Looks like I had, at one point before fully committing to Material-UI, had used individual themes for components and had never removed them. This is what was causing the issue. |
@ShaggyKris We would need to see your code to help fix this. What does your theme look like? I would make sure there isn't another theme that you have missed @oliviertassinari's comment will help with this |
@ShaggyKris You can expand one of the error, you will see the stack trace. With that, you can find where the culprit is 🔍. |
Current Behavior
Some warning about migrating to Typagraphy V2 appeared on my console. I tried to resolve most of them, but an error appears everytime I type on a TextField. The error is as follows:
index.js:2178 Warning: Material-UI: You are using the typography variant body1 which will be restyled in the next major release. Please read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2
The text was updated successfully, but these errors were encountered: