Web開発ブログ

TypescriptでMaterial UIのThemeカラーを拡張する

Material UI

Typescript

作成

2023/07/13

使用したバージョン
@mui/material 5.13.6

ヘッディング専用の背景色を作成したかったので、paletteのbackgroundに新しい色を追加した。


const theme = createTheme({
    palette:{
        ...
        background: {
            default: grey[800],
            heading: blueGrey[900]
        }
    },
});

しかし、Typescriptを使用しているとTypeBackgroundにそんなプロパティはないと警告される。


Type '{ default: "#424242"; heading: "#263238"; }' is not assignable to type 'Partial<TypeBackground>'.
Object literal may only specify known properties, and 'heading' does not exist in type 'Partial<TypeBackground>'

解決策

TypeBackgroundを拡張すると警告は消えた。


declare module '@mui/material/styles' {
    interface TypeBackground {
        heading: string;
    }
}