javascript - 使用具有像素值而不是 sm、md、lg、xl 的 Material-UI 断点

Question

我这里有一些代码

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

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

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

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

标签： javascriptcssreactjsmaterial-uijss

Answer 1

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

目前您的代码将生成以下内容：

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

这不会匹配任何东西，因为任何高于 min-width 的东西都不可能满足 max-width 标准。

如果您交换两个参数并执行theme.breakpoints.between(1021, 1200)，您将得到以下结果（效果会更好）：

@media（最小宽度：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>
  );
}