Material UI: cannot customize theme

3
votes

I am trying to customize the theme of my app (which uses Material UI) as such:

https://material-ui.com/customization/themes/#muithemeprovider

src/index.js:

import App from './App';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import { createMuiTheme } from '@material-ui/core/styles';
import red from '@material-ui/core/colors/red';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: green,
    secondary: green,
  },
  status: {
    danger: 'orange',
  },
});

ReactDOM.render(
  <MuiThemeProvider muiTheme={theme}>
    <App />
   </MuiThemeProvider>
  , document.getElementById('root'));

src/App.js:

import { withTheme } from '@material-ui/core/styles'
class App extends Component {
   ...
}

export default withTheme()(App);

However, the default theme color is still showing for me: enter image description here

I'm trying to achieve this color theme from Firebase Console: enter image description here Why is it not working?

2
reactjsmaterial-ui

2 Answers

5
votes

This line:

  <MuiThemeProvider muiTheme={theme}>

Needs to be:

  <MuiThemeProvider theme={theme}>
0
votes

I think you're missing withTheme() https://material-ui.com/customization/themes/#withtheme-component-component

in your Root component, you should export:

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

export default withTheme()(Root);