Request for Global Palette Key Extension Support for All Component Props

Summary

I'm currently using Material UI v6.4.6 with TypeScript, and I have encountered an issue when trying to add a custom color to my palette and use it across various components. While extending the palette interface to include custom keys is straightforward, I find it cumbersome to have to manually extend each component's props (e.g., ButtonPropsColorOverrides, IconButtonPropsColorOverrides, etc.) to accept the custom color for type safty.

Examples

Create a theme with a custom palette key (e.g., accent).

Attempt to use the custom palette key in a component, such as .

Note the TypeScript error indicating that the accent key is not allowed for the color prop.

import { createTheme } from "@mui/material";

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

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

let muiTheme = createTheme({
  palette: {
    primary: {
      main: "#E7FAFE",
    },
    secondary: {
      main: "#fff",
    },
  },
});

muiTheme = createTheme(muiTheme, {
  palette: {
    accent: muiTheme.palette.augmentColor({
      color: {
        main: "#000",
      },
      name: "accent",
    }),
  },
});

export default muiTheme;

as documantation says

Motivation

I understand that the current workaround involves augmenting the props interface for each individual component, as shown below for the Button component:

declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    accent: true;
  }
}

However, this approach is repetitive and error-prone, especially in larger codebases where multiple components need to be extended.

I propose adding support for globally extending all component props to accept custom palette keys. This could be achieved through a single configuration or utility that ensures type safety without needing repetitive manual declarations for each component.

This enhancement would significantly reduce boilerplate code and improve the developer experience, making it easier to maintain and utilize custom palette keys across the entire component library.

Thank you for considering this request. I look forward to any feedback or suggestions from the maintainers and community.

Search keywords: Global-Palette,color-Palette,custome-color,type-safety,typescript-custome-color

Start with the documented palette augmentation example and the ButtonPropsColorOverrides pattern shown in the issue, then trace how component color props expose their allowed keys. Compare the declarations across components and define the scope of a global extension mechanism; done means a custom palette key is accepted with type safety without repeating per-component augmentations.