超小屏幕上的居中按钮 Material-UI React 不起作用（justify-xs-center）答案

【问题标题】：Centering button on extra small screen Material-UI React not working (justify-xs-center)超小屏幕上的居中按钮 Material-UI React 不起作用（justify-xs-center）
【发布时间】：2019-02-23 18:15:38
【问题描述】：

我尝试了一切，但似乎我错过了一些东西。当屏幕特别小时，我一直在尝试在网格内制作一个按钮中心。

此代码完美运行，但问题是我希望我的按钮仅在屏幕超小而不是所有尺寸时居中。

工作代码。

Grid item xs={12}>
  <Grid container justify="center">
    <Button color="primary" variant="raised">
      Add Product
    </Button>
  </Grid>
 </Grid>

代码无效...

Grid item xs={12}>
  <Grid container className={"justify-xs-center"}>
    <Button color="primary" variant="raised">
      Add Product
    </Button>
  </Grid>
</Grid>

我一直在阅读 Grid 的 API 文档，据我了解这是在组件中添加预定义类的正确方法，但效果似乎不起作用。当我按预期在 Grid 容器组件上找到类 justify-xs-center 来检查元素时。

感谢您的帮助。

【问题讨论】：

给包含按钮的父容器一个宽度，可能是 100%，然后设置 margin-left: "auto" 和 margin-right: "auto" 使里面的内容居中。检查你的 html 元素也有助于了解为什么 flex 不起作用
谢谢朋友，我只是假设material-ui的CSS API有问题
这不是一个不常见的想法，但大多数时候在这些情况下极不可能。干杯哥们
我发现自己处于类似的情况，我所期望的是像justify-xs-center 加上justify-sm-flex-start，但没有这样的东西:( 看来我们需要写媒体查询

标签： reactjs css-selectors material-ui react-component

【解决方案1】：

看来我真的误解了 Grid 的 CSS API。 https://material-ui.com/api/grid/#css-api

我对此的解决方案是使用 material-ui 提供的断点。 https://material-ui.com/layout/breakpoints/#theme-breakpoints-up-key-media-query

我创建了这个 CSS 规则并将其应用于我希望其内容居中的 Grid 容器元素。

const styles = theme => ({
  addButtonContainer: {
    [theme.breakpoints.down("xs")]: {
      justifyContent: "center"
    }
  }
});

这是以超小屏幕为中心的容器

<Grid item xs={12}>
  <Grid container className={classes.addButtonContainer}>
    <Button color="primary" variant="raised">
      Add Product
    </Button>
  </Grid>
</Grid>

【讨论】：