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

Well it seems i have really misunderstood the CSS API of the Grid. https://material-ui.com/api/grid/#css-api

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

My solution to this was to use the breakpoints offered by material-ui. https://material-ui.com/layout/breakpoints/#theme-breakpoints-up-key-media-query

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

I created this CSS rule and applied it to the Grid container element that i wanted its contents to be centered.

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

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

And this is the container that is being centered on extra small screens

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