css - React : cannot see changes when applying <ThemeProvider> 的 Material-UI

Question

应用“ThemeProvider”标签时，我看不到任何变化，即使在如下所示的简单元素中也是如此。
浏览器控制台中没有错误/警告(未使用的导入除外，但即使我将它们全部删除也会失败)。

import React, { Component } from "react";
import Grid from "@material-ui/core/Grid";
import CssBaseline from "@material-ui/core/CssBaseline";
import MainBar from "./modules/MainBar";
import MainTemplate from "./style/MainTemplate";
import Palette from "./palette";
import { Button } from "@material-ui/core";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
import purple from '@material-ui/core/colors/purple';


const theme = createMuiTheme({
  typography: {
    useNextVariants: true
  },
  palette: {
    primary: purple,
    secondary: {
      main: "#f44336"
    }    
  }
});

class App extends Component {
  render() {
    return (
      <div className="App">
        <ThemeProvider theme={theme}>
          <Button color="primary">BUTTON</Button>
        </ThemeProvider>
      </div>
    );
  }
}

export default App;

有什么想法吗？它几乎就像文档示例，但它不起作用。
谢谢你。

Answer 1

进口 MuiThemeProvider喜欢，

import { MuiThemeProvider } from '@material-ui/core/styles';

并替换您的代码，

<ThemeProvider theme={theme}>
    <Button color="primary">BUTTON</Button>
</ThemeProvider>

有了这个，

<MuiThemeProvider theme={theme}>
    <Button color="primary">BUTTON</Button>
</MuiThemeProvider>

Ref