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

})