🐥
MUI@6 でカスタムパレットを型安全に定義する
自身が定義したプロパティをコンポーネント側でも型定義する際、バージョン5と6で定義方法が変わったので備忘録として残します。
今回は独自で定義した gray というプロパティをコンポーネントでも候補として出せるようにする方法です。
MUI@5 でやっていた型定義
検索するとよく出てくるやり方。
declare module '@mui/material/styles'
に定義するのは Palette
と PaletteOptions
を 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