Material UI + TypeScript で withStyles (JSS) を型付きで使う

Material-UI を使い始めて数日が経ち、ようやくJSSの思想が飲み込めてきました。 当初の違和感もだんだん薄れ、今では(今のところは)確かに楽だよねという感覚になってきております。

今回は型定義についてです。

import * as React from 'react'
import { createStyles, Theme, WithStyles, withStyles } from '@material-ui/core/styles'

interface Props extends WithStyles<typeof styles> {
  // my props...
}

function MyComponent({ classes }: Props) {
  return (
    <div className={classes.root}>
      {/* my contents... */}
    </div>
  )
}

const styles = createStyles({
  root: {
    // my styles...
  },
})

export default withStyles(styles)(MyComponent)

と定義すると classes.xyz のように styles 変数の定義に存在しない ClassKey にアクセスしようとするとエディタが怒ってくれるようになります。 typeof styles で styles オブジェクトを型の世界に持ち込んでいるのがみそですね。

関数形式の styles を利用する場合は以下のようにします。

const styles = ({ spacing }: Theme) => createStyles({
  root: {
    // my styles...
  },
})

始めは createStyles((theme: Theme) => ({ ... })) と定義しようと勘違いしておりました。

そして後から気づいたのですが、今回の内容は全部 https://material-ui.com/guides/typescript/ に書いてありましたね。