CSS
JavaScript
reactjs
material-ui

Material-UI@1.0.0-beta.13

Material-UI

Material-UIはGoogle Material Designに沿ったカスタマイズ性の高いUIライブラリです。

他のUIライブラリのようにButtonやCardなどのコンポーネントが揃ってるが、グリッドシステムや表示切り替え、スタイルの管理として使用することができる。

Material-UIはGridとflexを多用しているので、レイアウトの修正もそこそこ柔軟に対応可能。

Qiita : Material-UIでGridレイアウトを試す

また、ブレイクポイントやフォントサイズなどGoogle Material Designに沿って開発でき、後から気に入らない部分を自由に調整できる。

具体的には「palette > theme > className」の順でスタイルを調整することになる。

StyleSheet

オブジェクトでスタイルシートは定義する。

component.style.js
export default theme => ({
  container: {
    backgroundColor: 'blue'
  }
})

withStylesを用いてスタイルシートを適用。
これはHoCsなのでprops.classesに格納される。

component.js
import withStyles from 'material-ui/styles/withStyles'
import styleSheet from './component.style'

const Component = props =>
  <div className={props.classes.container} />

export default withStyles(styleSheet)(Name)

クラスを用いる場合は

component.js
import withStyles from 'material-ui/styles/withStyles'
import styleSheet from './component.style'

@withStyles(styleSheet)
export default class Name extends Component {
  render () {
    const {classes} = this.props
    return (
      <div className={classes.container}></div>
    )
  }
}

デコレータを使用しない場合は

component.js
import withStyles from 'material-ui/styles/withStyles'
import styleSheet from './component.style'

class Name extends Component {
  render () {
    const {classes} = this.props
    return (
      <div className={classes.container}></div>
    )
  }
}

export default withStyles(styleSheet)(Name)

Jss

Material-UIではJssを用いる。

const styleSheet = {
  button: {
    fontSize: 12,
    '&:hover': {
      background: 'blue'
    }
  },
  ctaButton: {
    extend: 'button',
    '&:hover': {
      background: color('blue').darken(0.3).hex()
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      width: 200
    }
  }
}

これはReactのinline-styleではなく、スタイルシートがheadタグに挿入される。

↓ こうではなく

inline
<div style={{color: red}}>test</div>

↓ こうであるということ

styleSheet
<style>.style { color: red }</style>
<div ClassName='style'>test</div>

同じスタイルシートは2度は生成されないので、例えばButtonコンポーネントを2回使用して2つのスタイルシートが生成されるわけではない。

スタイルシートなので、:hoverなども使える。

また、動的に生成されるので、サーバーサイドレンダリングには注意が必要。

theme

createStyleSheetthemeからはpaletteなどが参照できる。

export default theme => ({
  root: {
    backgroundColor: theme.palette.text.primary,
    [theme.breakpoints.down('md')]: {
      backgroundColor: theme.palette.text.seccondary
    }
  }
})

他にもアニメーションのイージングや余白、関数など色々ある。

jss-theme-reactor

既存のMuiButtonなどのスタイルを上書きすることができる。

例えば、MuiCardの場合はこのようにオブジェクトを生成する。

MuiCard
import grey from 'material-ui/colors/grey'

export default {
  root: {
    background: grey[50]
  },
  rounded: {
    borderRadius: 4
  }
}

次にcreateMuiThemeを用いてthemeを生成。

theme
import createMuiTheme from 'material-ui/styles/createMuiTheme'
import MuiCard from './MuiCard'

const overrides = {MuiCard}

export default createMuiTheme({overrides})

最後にMuiThemeProviderに渡して適用する。

MuiThemeProvider
<MuiThemeProvider theme={theme}>

palette

palettecreateMuiThemeに渡すことができる。

palette
import createMuiTheme from 'material-ui/styles/createMuiTheme'
import purple from 'material-ui/colors/purple'
import green from 'material-ui/colors/green'
import red from 'material-ui/colors/red'

const palette = {
  primary: purple,
  secondary: green,
  error: red
}

export default createMuiTheme({palette})

createMuiTheme

他にもbreakpointsなどがあります。

createMuiThemeで生成されるthemeは書き換え可能なオブジェクトなので、上書きしてMuiThemeProviderに渡すことができます。

import deepmerge from 'deepmerge'
import createTypography from 'material-ui/styles/createTypography'
import createBreakpoints from 'material-ui/styles/createBreakpoints'
import createMixins from 'material-ui/styles/createMixins'

const theme = createMuiTheme({
  breakpoints: createBreakpoints(),
  mixins: createMixins(breakpoints, spacing),
  typography: createTypography(palette),
})

// theme.breakpoints = ...overrides

export default theme

サンプルコード

ここにサンプルがあります。

https://github.com/callemall/material-ui/blob/v1-beta/docs/src/pages/getting-started/examples.md