我在这里有一些代码
[theme.breakpoints.only('lg')]: {}
在我想要的断点处工作和移动的对象。但是,当我使用以下内容
[theme.breakpoints.between('1200', '1021')]: {}
在这些方面实际上并没有中断。我想知道如何在断点部分中使用实际数字,以使mui能够选择它。我不想为其创建新的断点。
答案 0 :(得分:2)
theme.breakpoints.between
函数支持传递数字而不是断点键。唯一的问题是您以错误的顺序传递了它们。您需要先设置较低的像素值。
当前您的代码将generate the following:
@media(最小宽度:1200px)和(最大宽度:1020.95px)
这与任何内容都不匹配,因为超出最小宽度的任何内容都不可能满足最大宽度条件。
如果您交换两个参数并执行theme.breakpoints.between(1021, 1200)
,您将改为get the following(效果会更好):
@media(最小宽度:1021px)和(最大宽度:1199.95px)
还值得认识到theme.breakpoints.x
函数只是convenience methods for creating media query strings。在JSS样式中,它也可以很好地用于直接指定媒体查询,例如以下示例:
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>
);
}