The MUI palette is extendable, but you need to do a couple of things to create a new color and apply to your Button
component.
First, let’s define a theme with a custom color variable. You can use augmentColor()
to generate the PaletteColor
so it can be consumed in your Button
:
import { purple } from "@mui/material/colors";
const { palette } = createTheme();
const theme = createTheme({
palette: {
myAwesomeColor: palette.augmentColor({ color: purple }),
// Use this code if you want to use an arbitrary color
// myAwesomeColor: palette.augmentColor({
// color: {
// main: "#00ff00"
// }
// })
}
});
Then update your TypeScript definition, so it can recognize the property myAwesomeColor
when referencing the Palette
and PaletteOption
objects (skip this step if you’re using JavaScript). You also need to extend the Button
‘s color props definition, because by default it only accepts the following values:
'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
declare module "@mui/material/styles" {
interface Palette {
myAwesomeColor: string;
}
interface PaletteOptions {
myAwesomeColor: string;
}
}
declare module "@mui/material/Button" {
interface ButtonPropsColorOverrides {
myAwesomeColor: true;
}
}
The final step is to inject the custom theme and set the custom color for your Button
:
<ThemeProvider theme={theme}>
<Button color="myAwesomeColor" variant="contained">
AWESOME
</Button>
</ThemeProvider>