Is it possible to add a custom property to theme > palette > text? I want to add 'light' property.

I tried to extent the TypeText interface, but it's not working. There's an error: Property 'light' does not exist on type 'TypeText'.ts(2339)

import { createTheme, TypeText } from '@mui/material/styles';

interface TypeTextExt extends Partial<TypeText> {
  light: string;
}

export const theme = createTheme({
  palette: {
    text: {
      primary: '#111',
      secondary: '#222',
      disabled: '#333',
      light: '#444',
    } as TypeTextExt,
} ...

Is it possible to add a custom property to theme > palette > text? I want to add 'light' property.

I tried to extent the TypeText interface, but it's not working. There's an error: Property 'light' does not exist on type 'TypeText'.ts(2339)

import { createTheme, TypeText } from '@mui/material/styles';

interface TypeTextExt extends Partial<TypeText> {
  light: string;
}

export const theme = createTheme({
  palette: {
    text: {
      primary: '#111',
      secondary: '#222',
      disabled: '#333',
      light: '#444',
    } as TypeTextExt,
} ...

• material-ui
• themes
• palette
• custom-theme

1 Answer 1

Found that it works perfectly declaring a module:

declare module '@mui/material/styles' {
  interface TypeText {
    light?: string;
  }
   interface Palette {
     text: TypeText;
   }
   interface PaletteOptions {
     text?: Partial<TypeText>;
   }
}