Add alpha for all variants in MUI Theme - React - reactjs

Question

I have a MUI theme setup and I would like to add an alpha color to MuiChip. I am not sure on how to access the specific color inside createTheme. For example, if my primaryColor is '#FF0000' and the secondary color is '#00ff00', just for MuiChip, I want to do backgroundColor: alpha(theme.palette, 0.1); If I pass a variant prop for the chip component, the backgroundColor should be changed to the alpha version of that variant.
export const theme = createTheme({
palette: {
primary: {
main: colors.primary,
},
secondary: {
main: colors.secondary,
},
error: {
main: colors.red,
},
},
components: {
MuiChip: {
styleOverrides: {
colorPrimary: {
color: 'white',
},
root: {
backgroundColor: alpha(theme.palette, 0.1)
}
},
},
},
});
Please advice.

Answer 1

As I can see your theme you misunderstood how MUI works with themes. I see this main problems:
If you use just MUI colors.primary is not valid. You must use exact color code like #fff. (not true if you use some kind of color lib)
in styleOverrides you must use the template from the doc here. With this you will get theme and ownerState to manipulate components on CSS level.
theme.palette is not the exact color reference you should use theme.palette.primary.main in alpha()
You can use alpha but I think opacity is easier
Just for information for other readers here we can find CSS reference of Chip component for Rule Names to override.
I made a working code on Codesandbox, you can try it.
Here is my theme to solve the problem:
export const theme = createTheme({
palette: {
primary: {
main: "#a0a"
},
secondary: {
main: "#0a0"
},
error: {
main: "#a00"
}
},
components: {
MuiChip: {
styleOverrides: {
root: {
color: "#0a0"
},
colorSuccess: ({ ownerState, theme }) => ({
...(ownerState.variant === "custom" && {
backgroundColor: alpha(theme.palette.primary.main, 0.3)
})
})
}
}
}
});