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

Question

I cannot see any change when applying "ThemeProvider" tag, even in a simple project as shown below. There is no errors/warnings in the browser console (except for unused imports, but it fails even if I remove them all).

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;

Any idea about it? Its almost like documentation example, and it doesn't work. Thank you.

Answer 1

Import MuiThemeProvider like,

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

And replace your code,

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

with this,

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

Ref