我尝试了一切,但似乎我错过了一些东西。当屏幕特别小时,我花了很多时间在网格内制作一个按钮中心。
这段代码工作完美,但问题是我希望我的按钮仅在屏幕特别小时而不是在所有尺寸上居中。
工作代码。
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 类。
如有任何帮助,我们将不胜感激,谢谢。
看来我真的误解了 Grid 的 CSS API。https://material-ui.com/api/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 https://material-ui.com/layout/breakpoints/#theme-breakpoints-up-key-media-query
我创建了这个 CSS 规则并将其应用到我希望其内容居中的网格容器元素。
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)