Material Layout-ui, Container Breakpoints

Question

I am starting a new project and learning React.

I have previous experience with twitter bootstrap, but I decided to go for material-ui.

I also decided to go to material-ui @next, as it includes a layout system ( https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui )

So far, I have successfully used the container and Layout element to reorder the elements in the container according to various breakpoints.

But I would also like to be able to respond to the container, meaning to give different values ​​of "align", "direction" and "justify" according to the same breakpoints.

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

In this example, the layout elements will correctly change according to the breakpoints md and sm, but there are no such rules for containers (for example, I would like the alignment to be "flex-start" when the breakpoint is md, and 'center', when the breakpoint is sm.

so my question is: "breakpoints" (xs, sm, md, lg, xl) can be used to change the way items are distributed across the line. So is it possible to use the same breakpoints to change how containers distribute their elements?

Thank you very much.

Answer 1

You can handle this using media queries via jss-theme-reactor:

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

Alternatively, you can handle this with the withWidth HOC function (which decorates the component with the width property):

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