React.js:MaterialUIを使ったTextFieldのコードサンプルのメモ

Kuniyoshi Takemoto

9年前

This post is also available in: English-US (英語)

React.jsで開発していて、Material UI のコンポーネントを利用する際に軽くハマりましたので、その試行錯誤した際のコードのメモを書き留めています。
React.js や Material UI はまだまだ発展途上なのもあり微妙に作法が変わったりしますので、なかなか大変ですよね。
同じような状況で困っている方にお役に立てれば幸いです。

Contents

1 TextFieldが動かないパターンサンプル
2 TextFieldが動くパターンサンプル
- 2.1 追記

TextFieldが動かないパターンサンプル

以下は、MaterialUIを使ったTextFieldが動かないパターン。
Material UI のテーマファイルとかをインポートして、初期値を定義する必要があるみたいです。

// sample001.jsx
// 動かないパターン。テーマを定義する必要があるっぽいです。
import React from 'react';
import TextField from 'material-ui/TextField';

export class Sample extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: 'Sample Value',
        };
    }


    render() {
        return (
          <div>
               <TextField hintText="Message Field"
	        floatingLabelText="MultiLine and FloatingLabel"
	        multiLine={true}
	        rows={2} />
          </div>
        );
    }
}

TextFieldが動くパターンサンプル

以下、取り急ぎMaterialUIを使ったTextFieldが動くパターン。
const styles, const muiTheme　とかでテーマファイルの初期値を定義しています。
deepOrange500 は今回適当に選んだカラーテーマセットで、他に色々と選ぶことができます。

// sample002.jsx
// とりあえず動くパターン。
import React from 'react';
import {deepOrange500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import TextField from 'material-ui/TextField';


const styles = {
    container: {
        textAlign: 'center',
        paddingTop: 200,
    },
};

const muiTheme = getMuiTheme({
    palette: {
        accent1Color: deepOrange500,
    },
});


export class Sample extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: 'Sample Value',
        };
    }


    render() {
        return (
          <MuiThemeProvider muiTheme={muiTheme}>
            <div>
                 <TextField hintText="Message Field"
                  floatingLabelText="MultiLine and FloatingLabel"
                  multiLine={true}
                  rows={2} />
            </div>
          </MuiThemeProvider>
        );
    }
}

追記

本記事を含めその他Material-UIの活用事例がレバテッククリエイターさんのブログで丁寧にまとめられています。
参考にしてみてください。
実装するときの参考に！Material-UI活用事例まとめ！

Tags: React.js