Question

我今天发现了这个非常棒的UI框架，花了很多时间浏览文档，我必须说，我已经爱上了它。现在我想将它用于中型项目，但我有两个问题：

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

我有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>
    )
  }

})

材质UI如何响应

1 个答案: