material-ui layout, breakpoints on containers

Question

I'm starting a new project and learning React.

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

I have also chose to go for material-ui@next since it includes a Layout system (https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui)

So far I have used the Layout's container and item with success to rearrange items in a container according to different breakpoints.

But I would like to also be able to make the container responsive, meaning giving different values to '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 items will resize properly according to the breakpoints md and sm, but there are no such rules for containers (for example I would like align to be 'flex-start' when the breakpoint is md, and 'center' when the breakpoint is sm.

so my question is : the 'breakpoints' (xs, sm, md, lg, xl) can be used to modify how the items are distributed on a line. So is it possible to use the same breakpoints to modify how containers distribute their items?

Thanks a lot.

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 using the withWidth HOC (which decorates the component with a 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);