Deprecated typography warning when using custom theme in Material-UI

All we need is an easy explanation of the problem, so here it is.

In the following code code, I am using a custom theme in Material-UI:

import React from "react";
import ReactDOM from "react-dom";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import { purple, green } from "@material-ui/core/colors";

const theme = createMuiTheme({
  palette: {
    primary: purple,
    secondary: green
  }
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Button color="primary">Button1</Button>
      <Button color="secondary">Button2</Button>
    </MuiThemeProvider>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

I am getting the following warning:

Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.

I am not using any typography (let alone any deprecated typography variant)

Why am I getting this warning? Can someone please explain.
Full demo at codesandbox: https://codesandbox.io/s/r5v9pjxnq4

Minimal repro code: https://codesandbox.io/s/p9628o7wlj
(Turns out just using createMuiTheme also gives the warning!)

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I just add in my index.html:

<script>window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true</script>

Method 2

The expanded error message links to https://material-ui.com/style/typography/#migration-to-typography-v2 which explains the message in more detail.

Above this you find the deprecated variants which include button. It’s not actually deprecated but will be restyled which some consider a breaking change which is why we log this warning.

I agree that it’s a bit overzealous to warn just by using createMuiTheme but I suspect that 95% of the use cases touch deprecated variants in some way.

Method 3

For anyone here this has been addressed in release v3.6.1

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply