Material-UIでヘッダーを作る【React】
Material-UIを使って、ReactのHeaderコンポーネントを作成する。
準備
以下のコマンドでMaterial-UIをインストールする。
npm install --save @material-ui/core npm install --save @material-ui/icons
コード
import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import Drawer from '@material-ui/core/Drawer'; import { Link } from 'gatsby'; const styles = { list: { width: 250, }, root: { flexGrow: 1, }, menuButton: { marginLeft: -12, marginRight: 20, }, }; class Header extends Component { state = { left: false, }; toggleDrawer = (side, open) => () => { this.setState({ [side]: open, }); }; render () { const { classes } = this.props; const sideList = ( <div className={classes.list}> <List> <Link to="/"> <ListItem button> <ListItemText primary="Home" /> </ListItem> </Link> <Link to="/about"> <ListItem button> <ListItemText primary="About" /> </ListItem> </Link> </List> </div> ); return ( <div className={classes.root}> <AppBar position="relative" color="inherit"> <Toolbar> <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleDrawer('left', true)}> <MenuIcon /> </IconButton> <Drawer open={this.state.left} onClose={this.toggleDrawer('left', false)}> <div tabIndex={0} role="button" onClick={this.toggleDrawer('left', false)} onKeyDown={this.toggleDrawer('left', false)} > {sideList} </div> </Drawer> <strong> <Link to="/" style={{ boxShadow: 'none', textDecoration: 'none', color: 'inherit', fontFamily: 'Montserrat, sans-serif', }}>Post Bank Extra</Link> </strong> </Toolbar> </AppBar> </div> ); } } Header.propTypes = { classes: PropTypes.object.isRequired, }; export default withStyles(styles)(Header);
ほぼMaterial-UIのデモコードのコピペ。
styles
は、それぞれのコンポーネントに指定するCSSスタイルを記述している。
sideList
で、メニューを開いたときのリンクのリストを作成する。今回はgatsby
のLink
コンポーネントを使用しているが、react-router-dom
とかのLink
でもOK。
メニューを開くかどうかは、state
で管理している。
withStylesは、Material UIのCSS in JSのAPIで、CSSを記述したstyles
を引数にとって、classes
プロパティを持ったコンポーネントを返す。className={classes.root}
などと指定すると、styles
で指定したCSSスタイルを適用することが出来る。
見た目
メニューアイコンをクリックすると、左からメニューが出てくる。
まとめ
ReactのCSS適用って色々方法あってどれが最適なのかよくわからない。
上の例みたいにwithStyles使ったり、styleで直接適用するのを混ぜるのは多分間違ってる。