Material-UI 是如何做出响应式的答案

【问题标题】：How is material-UI made responsiveMaterial-UI 是如何做出响应式的
【发布时间】：2016-04-15 09:41:53
【问题描述】：

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

我找不到任何网格系统，我该如何布局？
如何使其具有响应性？

我有使用 Zurb 的基础的经验，该基础具有完善的网格系统和响应式组件。现在你知道我从哪里来了。

【问题讨论】：

【解决方案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>
    )
  }

})

【讨论】：