ykokw_dev

tags

Getting Started Material Ui

install

npm install material-ui

Usage

  • create-react-app で作成したアプリを改修してみる

  • MuiThemeProvider を使ってapplication context にテーマをインジェクションする

    • その中の子要素でmaterial-uiのcomponentを利用するだけ

  • index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
  • App.js
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return (
      <div className="App">
        <MuiThemeProvider>
          <MyComponent />
        </MuiThemeProvider>
      </div>
    );
  }
}

export default App;

  • MyComponent.js

    • SFCで実装
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

export default function MyComponent(){
  return <RaisedButton label="Default" />
}

次にやること

This content is built with Gatsby