Material-UI v1.0을 TypeScript에서 사용해보십시오

이하에서 해설 받고 있는 건을 시험했습니다. (스페셜 선크스)
Material-UI v1.0을 TypeScript로 사용 - Qiita

Material-UI 본가 페이지

이번 소스는 다음에 일어났습니다.
스가사키/무이-ts-사 mpぇ

환경

・Visual Studio Code
· TSLint

create-react-app

create-react-app는 도입되었다고 가정합니다.
도입되지 않은 경우 Getting Start와 함께 배포
material-ui/Button.d.ts at master · mui-org/material-ui

create-react-app 명령으로 프로젝트의 병아리를 만듭니다.

# create-react-app-typescriptを使ってreactテンプレートを作成
create-react-app mui-ts-sample --scripts-version=react-scripts-ts

cd mui-ts-sample

# 動作確認
yarn start

Material-UI 설치

공식 페이지에서는 npm 으로 설명이 있었으므로 npm 으로 진행했습니다.
Installation - Material-UI

# material-uiインストール
npm install @material-ui/core
# SVGアイコンもインストール
npm install @material-ui/icons

Material-UI 사용

Material-UI v1.0을 TypeScript로 사용 - Qiita 의 샘플 코드를 사용하는 것에 따라 진행했습니다만 내 환경이 나쁜 것인가 잘 동작시킬 수 없었기 때문에, 파일을 분할하면서 진행했습니다.

절차

components 폴더 만들기

components/FlatButtonsSample.tsx 만들기

components/RaisedButtonsSample.tsx 만들기

components/Styles.tsx 만들기

App.tsx 변경

절차

결과만 열거해 갑니다.
TSLing에 화가 났으므로 import의 순서 등은 변경하고 있습니다.

FlatButtonsSample.tsx 만들기

FlatButtonsSample.tsx

import { WithStyles, withStyles } from '@material-ui/core/styles';
import DeleteIcon from 'material-ui-icons/Delete';
import Button from 'material-ui/Button';
import * as React from 'react';
import { ClassNames, styles } from './Styles';


interface IFlatButtonsProps {
    onClick: () => void;
}

// Stateless Function Componentsの場合
const FlatButtonsSample = withStyles(styles)<IFlatButtonsProps>(
    (props: IFlatButtonsProps & WithStyles<ClassNames>) => {
        const classes = props.classes;
        return (
            <div className={classes.box}>
                {/* クリックイベントの処理はこんな感じ */}
                <Button onClick={props.onClick} className={classes.button}>Default</Button>
                <Button color="primary" className={classes.buttonWithHover}>Primary</Button>
                <Button color="secondary"><DeleteIcon />削除</Button>
            </div>
        );
    }
);


export default FlatButtonsSample;

RaisedButtonsSample.tsx 만들기

RaisedButtonsSample.tsx

import { WithStyles, withStyles } from '@material-ui/core/styles';
import DeleteIcon from 'material-ui-icons/Delete';
import Button from 'material-ui/Button';
import * as React from 'react';
import { ClassNames, styles } from './Styles';


interface IRaisedButtonsProps {
    onClick: () => void;
}

// Componentクラスの場合
class RaisedButtonsSample extends React.Component<IRaisedButtonsProps & WithStyles<ClassNames>, {}> {
    public render() {
        const classes = this.props.classes;
        return (
            <div className={classes.box}>
                <Button onClick={this.props.onClick} className={classes.buttonWithHover}>Default</Button>
                <Button color="primary" className={classes.button}>Primary</Button>
                <Button color="secondary" className={classes.button}><DeleteIcon />削除</Button>
            </div>
        );
    }
}


// withStylesに型注釈が必要な場合は、以下のようにする
export default withStyles<{} & ClassNames>(styles)<IRaisedButtonsProps>(RaisedButtonsSample);

Styles.tsx 만들기

Styles.tsx

export const styles = {
    box: {
        border: 'solid 1px gray',
        margin: 10,
        padding: 10,
    },
    button: {
        margin: 10,
    },
    buttonWithHover: {
        // hoverも記述できる
        '&:hover': {
            backgroundColor: '#ff0000',
        },
        margin: 10,
    },
};


export type ClassNames = keyof typeof styles;

App.tsx

App.tsx

import * as React from 'react';
import FlatButtonsSample from './components/FlatButtonsSample';
import RaisedButtonsSample from './components/RaisedButtonsSample';

class App extends React.Component {
  public handleClick = () => {
    alert('Clicked!');
  }

  public render() {
    return (
      <div>
        <RaisedButtonsSample onClick={this.handleClick} />
        <FlatButtonsSample onClick={this.handleClick} />
      </div>
    );
  }
}

export default App;

결과

다음과 같은 느낌으로 작동했습니다.



IE11에서도 작동했습니다.