如何在材质ui网格中以不同方式对齐xs和md的内容

Question

我正在使用材质 ui Grid 组件来创建响应式网格布局。我想根据屏幕大小对齐网格内的内容 - 左对齐 xs 右对齐 md。我该怎么做？

我使用 xs 和 md 断点来根据屏幕大小划分网格。使用material-ui-grid doc。该文档还提到了一个名为 align-items-xs-flex-start 的属性。所以我给了 align-items-xs-flex-start 和 align-items-md-flex-end 作为 Grid 组件的道具，以查看内容是否在 xs 中与 md 中的左对齐和右对齐。但它没有用。

一些示例代码。

<Grid>
  <Grid xs={12} md={7}>
    Hi there!
  </Grid>
  <Grid xs={12} md={5}>
    John Doe!
  </Grid>
</Grid>

在中等大小的屏幕上，我希望 John Doe 正确对齐。在一个小屏幕上，我希望 John Doe 来到下一行并左对齐。当我尝试使用 align-items-xs-flex-start 和 align-items-md-flex-end 时，在这两种情况下它仍然左对齐。

Answer 1

不确定你最终是否解决了这个问题？无论如何我都会回答，以防其他人有类似的问题：

然后您可以使用 Material UI 断点为不同的尺寸设置不同的样式。例如，对于您的文本对齐示例，您需要这样的内容：

    [theme.breakpoints.down('sm')]: {
      textAlign: left,
    },
    [theme.breakpoints.up('md')]: {
      textAlign: center,
    }

另外，如果有人对您的示例感到困惑，他们应该知道 Grid 元素应该具有 container 和 item 属性才能正确显示：

<Grid container>
  <Grid item className="grid-el" xs={12} md={7}>
    Hi there!
  </Grid>
  <Grid item className="grid-el" xs={12} md={5}>
    John Doe!
  </Grid>
</Grid>

更多关于断点的信息：https://material-ui.com/customization/breakpoints/