MUI JSS 结合媒体查询而不重复

问题描述

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

[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',[theme.breakpoints.down('xs')]: {
  color: 'red',}

解决方法

首先要意识到的是，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）中实现目标的语法。 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>
  );
}

jss material-ui reactjs reactjs reactjs reactjs