material-ui佈局，容器上的斷點

Question

我開始一個新項目並學習React。

我以前使用twitter bootstrap的經驗，但選擇了材料用戶界面。

我也選擇了去了材料的UI @未來，因爲它包括佈局系統（https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui）

到目前爲止，我已經使用了佈局的容器和項目成功根據不同的容器中重新排列物品斷點。

但我希望也能夠使容器響應，意思是根據相同的斷點給出'對齊'，'方向'和'證明不同的值。

<Layout 
    container 
> 
<Layout item md={2} sm={12}> 
    <Layout 
     container 
     align={"stretch"} 
     direction={"row"} 
     justify={"center"} 
    // more Layout items here 
    </Layout> 
</Layout> 
<Layout item md={10} sm={12}> 
    <Layout 
     container 
     direction={"column"} 
     justify={"space-around"} 
     align={"flex-start"} 
    > 
    // more Layout items here 
    </Layout> 
</Layout> 
</Layout> 

在這個例子中，佈局項目將根據斷點MD和SM適當調整，但也有容器沒有這樣的規則（例如我想對齊是「柔性啓動」時斷點是md，'center'是斷點是sm時

所以我的問題是：'斷點'（xs，sm，md，lg，xl）可以用來修改項目在一行上的分佈方式。所以有可能使用相同的斷點來修改容器如何分配物品？

非常感謝。

Answer 1

您可以處理經由JSS-主題反應器這一點使用媒體查詢：

import withWidth, { isWidthUp } from 'material-ui/utils/withWidth'; 

const styleSheet = createStyleSheet('AppDrawer', theme => ({ 
    gridItemSmall: { 
    alignItems: 'center', 
    }, 
    gridItemMedium: { 
    alignItems: 'flex-start', 
    }, 
})); 

const testComponent = ({ width }, { styleManager }) => { 
    const classes = styleManager.render(styleSheet); 
    const itemClass = isWidthUp('md', width) ? classes.gridItemMedium : classes.gridItemSmall; 
    return (
    <Grid container> 
     <Grid item md={2} sm={12} className={itemClass}> 
     <div>Hi, I'm in an item.</div> 
     </Grid> 
     <Grid item md={10} sm={12} className={itemClass}> 
     <div>Yeah, me too.</div> 
     </Grid> 
    </Grid> 
); 
}; 

export default withWidth()(testComponent); 

：

const styleSheet = createStyleSheet('test', theme => ({ 
    gridItem: { 
    alignItems: 'center', 
    }, 
    [theme.breakpoints.up('md')]: { 
    gridItem: { 
     alignItems: 'flex-start', 
    }, 
    }, 
})); 

const testComponent = (props, { styleManager }) => { 
    const classes = styleManager.render(styleSheet); 

    return (
    <Grid container> 
     <Grid item md={2} sm={12} className={classes.gridItem}> 
     <div>Hi, I'm in an item.</div> 
     </Grid> 
     <Grid item md={10} sm={12} className={classes.gridItem}> 
     <div>Yeah, me too.</div> 
     </Grid> 
    </Grid> 
); 
}; 

或者，也可以這樣使用withWidth HOC（其裝飾用width屬性的成分）處理