【Material UI】TypeScript + React + Material-UI で style を適用する方法

Material UI とは

• GoogleのMaterialデザインを元に開発されたUIコンポーネントライブラリ
• コンポーネントの種類が豊富に用意されているため、デザインにかける工数を減らすことができる

書き方

追記: 公式サイトのblog記事では下記の書き方ではなく、 makeStyles を使用することが推奨されている

We have migrated a few demos from the withStyles() API to the makeStyles() API. If you are wondering which you should use, we would encourage the use of makeStyles() where possible. withStyles() is interesting for overriding

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

// styles 定義
const styles = (theme: Theme) : StyleRules => createStyles({
  root: {
    textAlign: 'center'
  },
  paragraph: {
    fontFamily: 'serif',
    padding: theme.spacing.unit * 2
  }
});

// Component の Props を WithStyles<typeof styles> で拡張
interface Props extends WithStyles<typeof styles> {
  title: string;
}

// Component 定義
const FirstComponent: React.FC<Props> = ({ classes, title }: Props) => (
  <div className={classes.root}>
    <p className={classes.paragraph}>
      { title }
    </p>
  </div>
);

// ComponentにTypeScriptコードのスタイルシートを組み込む
export default withStyles(styles)(FirstComponent);

createStyles()

• 型の拡大を防ぐ

WithStyles<typeof styles>

• 下記と同等

interface Props {
  title: string;
  classes: {
    root: string;
    paragraph: string;
  }; 
}

参考

• TypeScript - Material-UI