在 Material-UI 中使用自定义主题时已弃用的排版警告

IT技术 reactjs material-ui
2021-05-25 02:23:03

在以下代码中,我在 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"));

我收到以下警告: Warning: Material-UI: you are using the deprecated typography variants that will be removed in the next major release.

我没有使用任何排版(更不用说任何已弃用的排版变体)

为什么我会收到此警告?有人可以解释一下。
在codesandbox的完整演示:https ://codesandbox.io/s/r5v9pjxnq4

最小重现代码:https : //codesandbox.io/s/p9628o7wlj
(结果只是使用createMuiTheme也会给出警告!)

3个回答

我只是添加我的index.html

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

扩展的错误消息链接到https://material-ui.com/style/typography/#migration-to-typography-v2,它更详细地解释了该消息。

在此之上,您可以找到已弃用的变体,其中包括button. 它实际上并没有被弃用,但会被重新设计,有些人认为这是一个重大变化,这就是我们记录此警告的原因。

我同意仅通过使用 createMuiTheme 发出警告有点过分热心,但我怀疑 95% 的用例以某种方式涉及已弃用的变体。

对于这里的任何人,这已在 v3.6.1 版中得到解决