reactjs - 超小屏幕上的居中按钮 Material-UI React 不起作用(justify-xs-center)
问题描述
我尝试了一切,但似乎我错过了一些东西。当屏幕特别小时,我一直在尝试在网格内制作一个按钮中心。
此代码运行良好,但问题是我希望我的按钮仅在屏幕超小而不是所有尺寸时才居中。
工作代码。
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 来检查元素时。
任何帮助表示赞赏,谢谢。
解决方案
好吧,看来我真的误解了 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>
推荐阅读
- java - 不支持的类文件主要版本 58
- c# - 如何解决返回从协议构建的抽象类的 iOS 绑定解决方案接口属性
- tensorflow - 如何修改 ImageDataGenerator 以处理 csv 数据
- python - 使用子进程模块运行linux命令
- python - 提交按钮在使用crispy的django表单中不起作用
- node.js - 使用 Instagram Graph API 拉取创作者/公众账号的信息
- powershell - 将 .csv 行保存在不同的文件中
- html - 如何对字符串类型的数字进行排序?
- javascript - javascript 闭包是否可以访问它的外部外部函数
- java - 在请求 OkHttp 中发送 JSON