DEVDEV

MUIv5 Themeの拡張 with TypeScript の調査

作成日
2022-10-21
更新日
2022-10-25

前提

MUI v5 のcreateTheme()の実行時に渡すoptionsをパッケージで配布することが目的

Paletteに独自のプロパティを定義する

customgradientというプロパティを定義する。

palette.ts
import { PaletteOptions } from '@mui/material/styles' type CustomPaletteOptions = { custom: Record<string, `#${string}`> gradient: Record<string, string> } export const palette: PaletteOptions & CustomPaletteOptions = { custom: { green: '#12B886', }, gradient: { primary: 'linear-gradient(180deg, #1EB990 0%, #15A881 100%)', }, }
components.ts
import { ThemeOptions } from '@mui/material/styles' export const components: ThemeOptions['components'] = { }
theme.ts
import { ThemeOptions } from '@mui/material/styles' import { components } from './components' import { palette } from './palette' export const theme: ThemeOptions = { components, palette, }

PaletteOptionsの一部をRequiredにする

options: ThemeOptionsを吐き出す前に、palette.ts(PaletteOptions(ThemeOptions['palette']))を使用して、components.ts(ThemeOptions['components'])を定義するという利用ケースがあったが、型エラーが発生していた。

components.ts
export const components: ThemeOptions['components'] = { MuiTooltip: { styleOverrides: { tooltip: { color: palette.primary?.main, // 👈 型エラー }, }, }, }
error
プロパティ 'main' は型 'PaletteColorOptions' に存在しません。 プロパティ 'main' は型 'Partial<Color>' に存在しません。

PaletteColorOptionsはユニオン型なので、型解決できていない。型を絞り込むか、palette.ts型を変更することで対応できる。

ユニオン型 (union type) | TypeScript入門『サバイバルTypeScript』

ts
import { CommonColors, TypeAction } from '@material-ui/core/styles/createPalette' import { Color } from '@mui/material' import { alpha, PaletteOptions, SimplePaletteColorOptions } from '@mui/material/styles' type CustomPaletteOptions = { custom: Record<string, `#${string}`> gradient: Record<string, string> } type RequiredPaletteOptions = { common: CommonColors primary: Required<SimplePaletteColorOptions> // PaletteColorでも良いと思う secondary: Required<SimplePaletteColorOptions> error: Required<SimplePaletteColorOptions> warning: Required<SimplePaletteColorOptions> info: Required<SimplePaletteColorOptions> success: Required<SimplePaletteColorOptions> grey: Color action: TypeAction } export const palette: PaletteOptions & CustomPaletteOptions & RequiredPaletteOptions = { ... }

修正後

components.ts
color: palette.primary.main

Related