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

記事公開日:
最終更新日:

Sponsored Links

React.jsで開発していて、Material UI のコンポーネントを利用する際に軽くハマりましたので、コードのメモを書き留めています。
React.js や Material UI はまだまだ発展途上なのもあり微妙に作法が変わったりしますので、なかなか大変ですよね。

以下は、動かないパターン。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>
        );
    }
}

以下、取り急ぎ動くパターン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>
        );
    }
}

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報facebookページGoogle+そしてTwitter、またRSSfeedlyLINE@にてお知らせしていますのでフォローよろしくお願い致します。


Sponsored Links