🐥

MUI@6 でカスタムパレットを型安全に定義する

2025/01/24に公開

自身が定義したプロパティをコンポーネント側でも型定義する際、バージョン5と6で定義方法が変わったので備忘録として残します。

今回は独自で定義した gray というプロパティをコンポーネントでも候補として出せるようにする方法です。

MUI@5 でやっていた型定義

検索するとよく出てくるやり方。

declare module '@mui/material/styles' に定義するのは PalettePaletteOptions を extends する方法で定義します。

const CustomPalettes = {
  /** グレースケール */
  gray: {
    Black: "#1c1c1c",
    DarkGray: "#7b7b7b",
    Gray: "#bababa",
    LightGray: "#ececec",
    veryLightGray: "#efefef",
    extraLightGray: "#f9f9f9",
    White: "#ffffff",
  },
} as const;
type CustomPaletteType = keyof typeof CustomPalettes;

declare module '@mui/material/styles' {
  type CustomPaletteOptions = {
    [K in CustomPaletteType]: string;
  };

  interface Palette extends CustomPaletteOptions {}
  interface PaletteOptions extends CustomPaletteOptions {}
}

export const theme = createTheme({
  palette: {
    ...CustomPalettes,
  }
});

MUI@6 で行う型定義

バージョン5のように interface Palette extends CustomPaletteOptions {} とすると、
createTheme で独自プロパティを定義すると型エラーが起きてしまいました。

バージョン6では declare module "@mui/material/styles" に定義するのは
gray: CustomPaletteTypesType["gray"]; とすることで反映することができます。

const CustomPalettes = {
  /** グレースケール */
  gray: {
    Black: "#1c1c1c",
    DarkGray: "#7b7b7b",
    Gray: "#bababa",
    LightGray: "#ececec",
    veryLightGray: "#efefef",
    extraLightGray: "#f9f9f9",
    White: "#ffffff",
  },
} as const;
type CustomPaletteTypesType = typeof CustomPalettes;

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

export const theme = createTheme({
  palette: {
    ...CustomPalettes,
  }
});

まとめ

この方法であれば対応することができました。

[K in keyof CustomPaletteTypesType]: CustomPaletteTypesType[K]; で定義するともっと楽なのにな...と思うのですが、
']' が必要です。 と型エラーが起きてしまうので一旦このようにしました。
(どなたか解決方法をご存知でしたら教えていただけると...🙏)

Discussion