skills/material-ui-theming/reference.md

Material UI theming: reference snippets

Custom theme property (TypeScript)

After adding a key in createTheme, augment both Theme and ThemeOptions:

declare module '@mui/material/styles' {
  interface Theme {
    status: { danger: string };
  }
  interface ThemeOptions {
    status?: { danger?: string };
  }
}

Source pattern: Theming—Custom variables.

Extra shape keys (TypeScript)

New shape properties require augmenting Shape and ShapeOptions. See Shape—TypeScript.

theme.vars typings (CSS variables)

Typings for theme.vars are not enabled by default. Follow CSS theme variables—TypeScript.

Fallback when rendering outside ThemeProvider

backgroundColor: (theme.vars || theme).palette.primary.main;

Use when a component might run outside the provider. From CSS theme variables—Usage.