I've encountered an issue where the "ThemeProvider" tag does not seem to be causing any changes in my project, even when following a simple example like the one shown below. Despite having no errors or warnings in the browser console (except for some unused imports that I have already removed), the desired effect is not being achieved.
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;
Has anyone else experienced this issue? It seems to closely resemble the example provided in the documentation, but it simply isn't working as expected. Any insights would be greatly appreciated. Thank you.