Javascript 使用具有像素值的材质UI断点，而不是sm、md、lg、xl

我这里有一些代码

[theme.breakpoints.only('lg')]: {}

它工作并在我想要的断点处移动。但是，当我使用以下

[theme.breakpoints.between('1200', '1021')]: {}

---

事实上，它并没有在这些点上突破。我想知道如何使用断点部分中的实际数字，以使mui能够获取它。我不想为它创建新的断点。

主题。断点。between函数支持传递数字而不是断点键。唯一的问题是您以错误的顺序传递它们。首先需要有较低的像素值

目前，您的代码将：

@介质（最小宽度：1200px）和（最大宽度：1020.95px）

这将不匹配任何内容，因为超出最小宽度的内容不可能满足最大宽度标准

如果您交换这两个参数并在（10211200）之间执行

theme.breakpoints.between，您将执行以下操作（这会更好）：

@介质（最小宽度：1021px）和（最大宽度：1199.95px）

同样值得一提的是，
theme.breakpoints.x
函数仅仅是一个函数。它在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>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles，useTheme}”；
const useStyles=makeStyles({
myCustomClass：{
“@介质（最小宽度：600px）和（最大宽度：1199.95px）”：{
背景颜色：“绿色”
},
“@media（最大宽度：599.95px）”：{
背景颜色：“蓝色”
},
“@media（最大宽度：900px）”：{
颜色：“黄色”
}
}
});
导出默认函数App（）{
const theme=useTheme（）；
const classes=useStyles（）；
返回(
theme.breakpoints.between（“1021”，“1200”）：{'}
{theme.breakpoints.between（“1021”、“1200”）}


theme.breakpoints.between（“sm”、“md”）：{“}
{theme.breakpoints.between（“sm”，“md”）}


theme.breakpoints.only（“md”）：{theme.breakpoints.only（“md”）}
);
}