Request for Global Palette Key Extension Support for All Component Props

[erufan]

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

[siriwatknp]

Thanks for the feedback!
It's quite a common use case, so I mark as v7 to consider it.

[erufan]

I'm appreciated.
interested in potentially contributing. However, I'm not yet sure if I can successfully implement this feature.

If a community contribution for this feature is welcome, then I would like to request a 7-day period to investigate the codebase and assess the feasibility of my implementing it. After this assessment, and assuming contribution is welcome, I will follow up with more specific questions regarding architectural/design guidelines and workflow.

Sincerely,
Thank you for your time and consideration.