material-ui - Material-UI 是如何做出响应式的

Question

我今天发现了这个很棒的 UI 框架，并花了很多时间浏览文档，我必须说，我已经爱上了它。现在我想将它用于一个中等规模的项目，但我有两个顾虑:

1. 我找不到任何网格系统，我该如何进行布局？
2. 如何让它响应？

我有 Zurb 基金会的经验，该基金会拥有完善的网格系统和响应式组件。现在你知道我来自哪里了。

Answer 1

是的，当我第一次开始使用 Material-UI 时，我错过了一个网格系统，但我已经习惯了它的响应方式。我怀疑因为它支持内联样式，所以网格方法并不理想。因此，以下是让它响应屏幕尺寸的方法:

import React from 'react'

import {Mixins} from 'material-ui'
const {StylePropable, StyleResizable} = Mixins

export default React.createClass({

  // Boilerplate and React lifecycle methods

  propTypes: {
    onChangeMuiTheme: React.PropTypes.func,
  },

  contextTypes: {
    muiTheme: React.PropTypes.object,
  },

  mixins: [StylePropable, StyleResizable],

  getInitialState() {
    return {
    }
  },

  // Helpers

  getStyles() {
    let styles = {
      text: {
        fontSize: 12,
        color: this.context.muiTheme.rawTheme.palette.primary1Color
      }
    }

    // example of a screen-size sensitive style
    if (this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM)) {  // active for >= MEDIUM
      styles.text.fontSize = 20
    }

    return styles
  },

  render() {
    let styles = this.getStyles()
    return (
      <p style={styles.text}>Hello world!</p>
    )
  }

})