TypeScript と Material-UI withStyles
TypeScript と Material-UI withStyles
ググって最初に出てきたのを試したけどだめだったが、material-ui のリポジトリ見てたら TypeScript のサンプルがあったので、これを見ながら使ってみる。
インストール
まずは material-ui をインストール:
->|bash| yarn add @material-ui/core
バージョンはこんなかんじ:
->|json| "dependencies": { "@material-ui/core": "^1.5.1", }, "devDependencies": { "typescript": "^3.0.1" },
TypeScript v2.7 くらいでやったときはコンパイルエラー起きたので注意。
withStyles
そのまま使うならなんにも考えなくていいんだけど、withStyles
で classes
をインジェクションしたい場合、ちょっとトリッキーな使い方になる。
createTheme
は型コンパイルを行うだけで、ランタイム時には何もしない関数。WithStyles
で classes
に型を提供する。
->|tsx| import Button from "@material-ui/core/Button"; import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; import { Theme } from "@material-ui/core/styles/createMuiTheme"; import * as React from "react"; interface OwnProps { label: string; } const styles = (theme: Theme) => { return createStyles({ button: { margin: theme.spacing.unit } }); }; type MyButtonProps = OwnProps & WithStyles<typeof styles>; const MyButton: React.SFC<MyButtonProps> = ({ label, classes }) => { return ( <Button color="primary" className={classes.button}> {label} </Button> ); }; export default withStyles(styles)(MyButton);