He estado usando Materail UI v5 en mi próximo proyecto js con mecanografiado.

tema.ts

 import { createTheme, Theme } from "@mui/material/styles"; import { blue, orange, pink, purple, red, yellow } from "@mui/material/colors"; export const theme = createTheme({ palette: { primary: { main: red[300], }, success: { main: blue[200], }, secondary: { main: yellow[200], }, }, });

Hice un componente para el botón que es

 import React from "react"; import { Button as BaseButton } from "@mui/material"; import {ButtonProps} from "@mui/material/Button" export type IButton = ButtonProps | "qwer"; export const Button: React.FC<IButton> = ({ ...rest }) => { return <BaseButton {...rest} />; };

y luego usarlo como

 <Button type="submit" fullWidth variant="contained" color="secondary" //primary or success className={classes.submit} >

pero ahora digamos que si quiero agregar un nuevo nombre de color a mi tema, ¿cómo puedo agregar esto?

probado con

 export const theme = createTheme({ palette: { primary: { main: red[300], }, xyz:{ qwe:red[500] }, });

y entonces

 <Button type="submit" fullWidth variant="contained" color={theme.palette.xyz.qwe} className={classes.submit} >

arroja error

Escriba '{ primario: { principal: "#e57373"; }; xyz: {qwe: "#e57373"; }; }' no es asignable para escribir 'PaletteOptions'.