I have been using Materail UI v5 in my next js project with typescript.

theme.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],
    },
  },
});

i made a component for button which is

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} />;
};

and then use it like

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

but now lets say if i want to add a new color name to my theme how do i add this ?

tried with

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

and then

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

it throws error

Type '{ primary: { main: "#e57373"; }; xyz: { qwe: "#e57373"; }; }' is not assignable to type 'PaletteOptions'.