React에서 Material-UI를 사용해 보았습니다.

9824 단어 Reactmaterial-ui
Material-UI은 react에 특화된 머티리얼 디자인의 CSS 프레임워크로, 스타일은 각 컴포넌트에 내장하는 느낌으로 SASS와는 대응하지 않는다고 합니다. react에 특화된 프레임워크 중에서는 가장 인기있는 머티리얼 디자인으로 만들고 싶기 때문에, 사용해 보겠습니다.

설치


$ create-react-app mui-test
$ cd mui-test
$ yarn add material-ui
$ yarn add react-tap-event-plugin
$ yarn start

index.js



src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

App.js



src/App.js
import React, { Component } from 'react';
import NavBar from './NavBar';

class App extends Component {
  constructor() {
    super()
    this.state = {
      open: false
    }
  }
  handleToggle() {
    this.setState({
      open: !this.state.open
    })
  }
  render() {
    return (
      <div>
        <NavBar
          onToggle={() => this.handleToggle()}
          open={this.state.open}
        />
      </div>
    );
  }
}

export default App;

NavBar.js



src/NavBar.js
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { AppBar, MenuItem, Drawer } from 'material-ui';

class NavBar extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <div>
          <Drawer
            docked={false}
            width={200}
            open={this.props.open}
            onRequestChange={() => this.props.onToggle()}
          >
            <MenuItem>React</MenuItem>
            <MenuItem>Redux</MenuItem>
            <MenuItem>React Router</MenuItem>
            <MenuItem>Material UI</MenuItem>
            <MenuItem>Electron</MenuItem>
          </Drawer>
          <AppBar
            title="React Study"
            onLeftIconButtonTouchTap={ () => this.props.onToggle()}
          />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default NavBar;

스크린샷





버튼 누르면 메뉴 열기



좋은 웹페이지 즐겨찾기