Overview

This post will go over how to use a custom theme to override the color for a Button. The advantage to using a theme versus changing the style of each component is consistency. You can apply a custom theme to any Material Component that has a Color property,

Prerequisites

MUI – Material UI v5.4.3

Material UI Version 5 library for React

npm install @mui/material @mui/lab @emotion/react @emotion/styled

MUI– Material UI v4.12.3

For those of you still maintaining applications with version 4

Material UI Version 4 library for React – @material-ui/icons is optional

npm install @material-ui/core @material-ui/styles @material-ui/icons

Custom Colors General Info

The color can be html hex, rgb, color name, or Material UI Colors. Just use the primary (default), secondary, success (v5), error (v5), or info (v5) color labels and define the main property. The color can be html Hex, R.G.B., Color Name, or a Material Color from the colors library.

const customTheme = createTheme({
    palette: {
      primary: {
        main: purple[500],
      },
      secondary: {
        main: '#f44336',
      },

    },
});

createTheme is used to override the theme properties. <ThemeProvider> is a wrapper for the component to inherit the custom theme.

Note you wrap multiple components with <ThemeProvider>.

 <ThemeProvider theme={customTheme}>
       <Button variant="outlined" color="secondary">Reset</Button>                
 </ThemeProvider>

Note: You can wrap multiple Material Components with <ThemeProvider> or an entire React Component. This is how you can create a Light/Dark theme for the entire application and wrap the Parent Component with <ThemeProvider>.

 <ThemeProvider theme={lightDarkTheme}>
       <MainParentComp />
 </ThemeProvider>

Custom Button Color – Version 5

Using createTheme and <ThemeProvider> to create a new theme and wrap the MUI Button Component to the custom colors.

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { purple, red } from '@mui/material/colors';


const custTheme = createTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: '#f44336',
    },
  },
});

export default function App(props) {

  return (
  <>
    <ThemeProvider theme={customTheme}>
       <Button variant="outlined" color="secondary">Reset</Button>                
    </ThemeProvider>

  </>
)

Custom Button Color – Version 4

Using createTheme and <ThemeProvider> create a new theme and wrap the MUI Button Component to use the custom color. The color can be html Hex, R.G.B., Color Name, or Material UI Colors from the .

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

const theme = createTheme({
    palette: {
      primary: {
        main: purple[500],
      },
      secondary: {
        main: '#f44336',
      },
    },
});

export default function App(props) {

  return (
  <>
    <ThemeProvider theme={theme}>
       <Button variant="outlined" color="secondary">Reset</Button>                
    </ThemeProvider>

  </>
)