MUI v7 color palette extension problem with TypeScript when using new colors on a Button

[CzechCoder]

I created a new color palette I want to use on a Button as in accordance to the documentation:

const theme = createTheme({
palette: {
customRed: {
main: "#ff1100",
light: "#f75348",
dark: "#ba1f14",
contrastText: "#FFF",
},
}
})

Then extended TypeScript declarations:

declare module "@mui/material/styles" {
interface Palette {
customRed: Palette["primary"];
}

interface PaletteOptions {
customRed?: PaletteOptions["primary"];
}

But then I get a TS error when using the new color palette on a Button (Type "customRed" is not assignable to type):

Button

It should work and it used to work for me in the past, but now it doesn't. Any ideas on how to expand my color palette for buttons?

Search keywords:

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.