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属性的成分）处理