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

Material-UI for React：应用<themeprovider>

1 个答案: