超小屏幕 Material-UI React 上的居中按钮不起作用(justify-xs-center) [英] Centering button on extra small screen Material-UI React not working (justify-xs-center)

问题描述

我尝试了所有方法，但似乎遗漏了一些东西.当屏幕特别小时，我一直在尝试在网格内制作一个按钮中心.

I tried everything but it seems that I'm missing something. I have been trying a lot of time to make a button center inside the grid when the screen is extra small.

此代码运行良好，但问题是我希望我的按钮仅在屏幕特别小而不是所有尺寸时居中.

This code works perfectly, but the problem is that i want my button to only center when the screen is extra small not on all sizes.

工作代码.

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

I have been reading the API documentation for the Grid, as i understand this is the correct way to add a predefined class in the component, but the effect seems not to work. When i inspect the element though the class justify-xs-center is found on the Grid container component as expected.

感谢任何帮助，谢谢.

推荐答案

好吧，看来我真的误解了 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>

这篇关于超小屏幕 Material-UI React 上的居中按钮不起作用(justify-xs-center)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！