Customizing the Material-UI theme

The Material-UI theme can be easily customized using the MuiThemeProvider component, and by configuring custom values to theme variables in createMuiTheme().

mern-skeleton/client/App.js:

import {MuiThemeProvider, createMuiTheme} from 'material-ui/styles'import {indigo, pink} from 'material-ui/colors'const theme = createMuiTheme({  palette: {    primary: {    light: '#757de8',    main: '#3f51b5',    dark: '#002984',    contrastText: '#fff',  },  secondary: {    light: '#ff79b0',    main: '#ff4081',    dark: '#c60055',    contrastText: '#000',  },    openTitle: indigo['400'],    protectedTitle: pink['400'],    type: 'light'  }})

For the skeleton, we only apply minimal customization by setting some color values to be used in the UI. The theme variables ...

Get Full-Stack React Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.