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

Question

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

我以前有使用 Twitter bootstrap 的经验，但选择了 material-ui。

我也选择了 material-ui@next，因为它包含布局系统 (https://material-ui-1dab0.firebaseapp.com/layout/responsive-ui)

至此我已经成功使用Layout的container和item根据不同的断点重新排列容器中的item

但我也希望能够使容器响应，这意味着根据相同的断点为 'align'、'direction' 和 'justify 赋予不同的值。

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

所以我的问题是：'breakpoints' (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 来处理这个问题（它用宽度属性装饰组件）：

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

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

material-ui layout, breakpoints on containers

responsive-design

reactjs

material-ui