Reputation: 185
I created my own custom theme and I'm trying to assing one of the colors I created to a button, but when I'm trying to set it as:
color={theme.pallete.lightGrey}
I'm getting this error:
No overload matches this call
Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Pick<...> & CommonProps & Pick<...>): Element', gave the following error.
Does this means that you can't assign custom colors to the color attribute? Only through styling
Upvotes: 2
Views: 1995
Reputation: 430
If you are using typescript use the global theme approach in this case,
neutral
and backgroundSecondary
so you need to register the types in material UI types declare module "@mui/material/styles" {
interface CustomPalette {
neutral: {
main: string;
contrastText: string;
};
backgroundSecondary: string;
}
interface Palette extends CustomPalette {}
interface PaletteOptions extends CustomPalette {}
}
neutral
to be read by the Button component so you do thisdeclare module "@mui/material/Button" {
interface ButtonPropsColorOverrides {
neutral: true;
}
}
theme
(in most cases this would have already been setup)let theme = createTheme({
palette: {
primary: {
main: "some-color",
},
secondary: {
main: "some-color",
},
error: {
main: "some-color",
},
neutral: {
main: "#fff",
contrastText: "#002255",
},
backgroundSecondary: "#f8fafc",
},
});
<Button variant="outlined" color="neutral"> Click Me</Button>
Upvotes: 4