material-ui布局,容器上的断点

Question

我正在开始一个新项目并学习React.

我以前有过twitter bootstrap的经验,但是选择了材料-ui.

我还选择了材料-ui @ next,因为它包含一个布局系统(https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui)

到目前为止,我已成功使用Layout的容器和项目根据不同的断点重新排列容器中的项目.

但我希望能够使容器响应,意味着根据相同的断点给出"对齐","方向"和"对齐"的不同值.

<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时,我希望对齐为'flex-start','center'当断点是sm时.

所以我的问题是:'断点'(xs,sm,md,lg,xl)可用于修改项目在一条线上的分布方式.那么是否可以使用相同的断点来修改容器分配其项目的方式？

非常感谢.

Answer 1

您可以通过 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>
  );
};

或者，您可以使用 withWidth HOC（使用 width 属性装饰组件）来处理此问题：

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