Question

在以下代码中，我在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.

我没有使用任何印刷术（更不用说任何不推荐使用的印刷术变体）

我为什么收到此警告？有人可以解释。
在codeandbox上的完整演示：https://codesandbox.io/s/r5v9pjxnq4

最小复制代码：https://codesandbox.io/s/p9628o7wlj
（原来仅使用createMuiTheme也会发出警告！）

Answer 1

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

在此之上，您会发现不推荐使用的变体，其中包括<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="sidebar-wrapper"> <ul class="nav nav-dropdown-items">  <li> <div class="panel-group" id="accordion1"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data- parent="#accordion1" href="#collapseOne">Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body">Panel 1</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data- parent="#accordion1" href="#collapseTwo">Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <div class="panel-body"> <h2>Heading</h2> <div class="panel-group" id="accordion21"> <div class="panel"> <a data-toggle="collapse" data- parent="#accordion21" href="#collapseTwoOne">View details 2.1 » </a> <div id="collapseTwoOne" class="panel- collapse collapse"> <div class="panel-body">Details 1 </div> </div> </div> <div class="panel "> <a data-toggle="collapse" data- parent="#accordion21" href="#collapseTwoTwo">View details 2.2 » </a> <div id="collapseTwoTwo" class="panel- collapse collapse"> <div class="panel-body">Details 2 </div> </div> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">  <a data-parent="#accordion1" href="#collapseThree">Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <div class="panel-group" id="accordion2"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data- parent="#accordion2" href="#collapseThreeOne">Collapsible Group Item #3.1 </a> </h4> </div> <div id="collapseThreeOne" class="panel- collapse collapse in"> <div class="panel-body">Panel 3.1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data- parent="#accordion2" href="#collapseThreeTwo">Collapsible Group Item #3.2 </a> </h4> </div> <div id="collapseThreeTwo" class="panel- collapse collapse"> <div class="panel-body">Panel 3.2 </div> </div> </div> </div> </div> </div> </div> </div> </li>  </ul> </div>。它实际上并没有被弃用，但是会被重新设置样式，有人认为这是一个重大更改，这就是我们记录此警告的原因。

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

Answer 2

我只需添加我的index.html：

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

Answer 3

对于这里的任何人，此问题已在v3.6.1版本中解决

在Material-UI中使用自定义主题时不建议使用的字体警告

3 个答案: