MUIv5 Themeの拡張 with TypeScript の調査

前提

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

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

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

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, // 👈 型エラー
      },
    },
  },
}

プロパティ 'main' は型 'PaletteColorOptions' に存在しません。
プロパティ 'main' は型 'Partial<Color>' に存在しません。

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

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

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