提问人：Luke 提问时间：7/14/2020 更新时间：7/14/2020 访问量：1944
使用带有像素值的 Material-UI 断点，而不是 sm、md、lg、xl
Using Material-UI breakpoints with pixel values instead of sm, md, lg, xl
问：
我这里有一些代码
[theme.breakpoints.only('lg')]: {}
它在我想要的断点处工作和移动。但是，当我使用以下内容时
[theme.breakpoints.between('1200', '1021')]: {}
它实际上并没有在这些点上中断。我想知道如何在断点部分使用实际数字，以便 mui 能够接受它。我不想为它创建一个新的断点。
答：
3赞
Ryan Cogswell
7/14/2020
#1
该函数支持传递数字而不是断点键。唯一的问题是您以错误的顺序传递它们。您需要先获得较低的像素值。theme.breakpoints.between
目前，您的代码将生成以下内容：
@media（最小宽度：1200px）和（最大宽度：1020.95px）
这不会匹配任何内容，因为高于 min-width 的任何内容都不可能满足 max-width 标准。
如果您交换两个参数并执行 ，您将得到以下内容（这将更好地工作）：theme.breakpoints.between(1021, 1200)
@media（最小宽度：1021px）和（最大宽度：1199.95px）
还值得认识到的是，这些函数只是创建媒体查询字符串的便捷方法。在 JSS 样式中，直接指定媒体查询也很好，如以下示例所示：theme.breakpoints.x
import React from "react";
import { makeStyles, useTheme } from "@material-ui/core/styles";
const useStyles = makeStyles({
myCustomClass: {
"@media (min-width:600px) and (max-width:1199.95px)": {
backgroundColor: "green"
},
"@media (max-width:599.95px)": {
backgroundColor: "blue"
},
"@media (max-width:900px)": {
color: "yellow"
}
}
});
export default function App() {
const theme = useTheme();
const classes = useStyles();
return (
<div className={classes.myCustomClass}>
theme.breakpoints.between("1021", "1200"):{" "}
{theme.breakpoints.between("1021", "1200")}
<br />
theme.breakpoints.between("sm", "md"):{" "}
{theme.breakpoints.between("sm", "md")}
<br />
theme.breakpoints.only("md"): {theme.breakpoints.only("md")}
</div>
);
}
评论