超小屏幕上的居中按钮 Material-UI React 不起作用(justify-xs-center)

Question

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

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

工作代码。

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 文档，因为我知道这是在组件中添加预定义类的正确方法，但效果似乎不起作用。当我检查元素时，尽管类 justify-xs-center 按预期在网格容器组件上找到。

任何帮助不胜感激，谢谢。

Answer 1

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