How to customize Material-UI theme?

[braytonstafford]

I'm trying to customize the theme for my create-react-app and I've imported the ThemeProvider exported here and passed my custom theme but I'm still getting the default Material-UI theme colors. Am I using this correctly? I'm also seeing an error in the console:

index.js:1 Material-UI: the createMuiTheme function was renamed to createTheme.

You should use `import { createTheme } from '@material-ui/core/styles'`

theme.js

import { red } from '@material-ui/core/colors';
import { createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#00BCD4',
      light: '#4DD0E1',
    },
    secondary: {
      main: '#FDD835',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#e5e5e5',
    },
  },
});

export default theme;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from 'amplify-material-ui';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';

import App from './App';
import theme from './theme';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <CssBaseline />
      <App />
    </MuiPickersUtilsProvider>
  </ThemeProvider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[braytonstafford]

I figured out that one of my issues is the component I am wrapping with the withAuthenticator HOC is my component but my ThemeProvider was in the parent component. I now have the wrapping all JSX inside my component and I'm seeing the colors defined in my custom theme. However, the amplify-material-ui AppBar that shows up when authenticated is still the default Material-UI blue instead of using my new primary theme color. Any ideas?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.