MUI JSS 结合媒体查询不重复

Question

我有一组 CSS 样式需要应用于多个媒体查询规则。有没有办法不重复地做到这一点？目前这样的事情似乎是唯一的垃圾方式：

[theme.breakpoints.up('xl')]: {
  color: 'red',
  backgroundColor: 'green',
  border: '1px solid blue',
  fontSize: 17,
  marginTop: 3,
  padding: 7,
  display: 'flex',
  flexDirecton: 'column',
},
[theme.breakpoints.only('md')]: {
  color: 'red',
  backgroundColor: 'green',
  border: '1px solid blue',
  fontSize: 17,
  marginTop: 3,
  padding: 7,
  display: 'flex',
  flexDirecton: 'column',
},
[theme.breakpoints.down('xs')]: {
  color: 'red',
  backgroundColor: 'green',
  border: '1px solid blue',
  fontSize: 17,
  marginTop: 3,
  padding: 7,
  display: 'flex',
  flexDirecton: 'column',
}

Answer 1

首先要认识到的是 theme.breakpoints 方法并没有做任何神奇的事情——它们只是生成媒体查询字符串的便捷方法。

例如 theme.breakpoints.down('xs')（使用默认断点值时）计算为 @media (max-width:599.95px)，theme.breakpoints.only('md') 计算为 @media (min-width:960px) and (max-width:1279.95px)。您可以在 createBreakpoints function.

中找到 Material-UI 代码

下一步是了解在 CSS（和 JSS）中实现 objective 的语法。 Commas 可用于对多个媒体查询条件进行“或”运算，因此您要为问题中的示例生成的字符串如下：

@media (max-width:599.95px), (min-width:960px) and (max-width:1279.95px), (min-width:1920px)

为了避免对断点值进行硬编码，您可以通过将所需的函数调用串在一起（使用逗号）并删除无关的 @media 来生成上述字符串，因为这应该只发生一次在开头。

这是一个工作示例：

import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  button: {
    color: "white",
    backgroundColor: "purple",
    [`${theme.breakpoints.down("xs")},${theme.breakpoints
      .only("md")
      .replace("@media", "")},${theme.breakpoints
      .up("xl")
      .replace("@media", "")}`]: {
      color: "red",
      backgroundColor: "green",
      border: "1px solid blue",
      fontSize: 17,
      marginTop: 3,
      padding: 7,
      display: "flex",
      flexDirecton: "column"
    }
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <Button className={classes.button} variant="contained">
      Hello World!
    </Button>
  );
}

MUI JSS 结合媒体查询不重复

MUI JSS combine media queries without repetition

css

reactjs

material-ui

jss