React 的 Material-UI：在应用 <ThemeProvider> 时看不到变化

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>

参考