如何使用 CSS @media 在 Reactjs Material UI 上使用 makeStyles 进行响应？

Question

const useStyles = makeStyles(theme => ({
  wrapper: {
    width: "300px"
  },
  text: {
    width: "100%"
  },
  button: {
    width: "100%",
    marginTop: theme.spacing(1)
  },
  select: {
    width: "100%",
    marginTop: theme.spacing(1)
  }
}));

有没有办法在上述变量中​​使用 CSS @media？

如果不可能，我怎样才能使我的自定义 css 响应？

Answer 1

下面是一个示例，显示了在其中指定媒体查询的两种方式makeStyles（再往下是使用 的 v5 示例styled）。您可以在theme.breakpoints 中使用up、down、only和between函数（根据主题中指定的断点为您生成媒体查询字符串），也可以直接使用媒体查询。

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",
    [theme.breakpoints.down("xs")]: {
      marginTop: theme.spacing(1),
      backgroundColor: "purple"
    },
    [theme.breakpoints.between("sm", "md")]: {
      marginTop: theme.spacing(3),
      backgroundColor: "blue"
    },
    "@media (min-width: 1280px)": {
      marginTop: theme.spacing(5),
      backgroundColor: "red"
    }
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <Button className={classes.button} variant="contained">
      Hello World!
    </Button>
  );
}

相关文档：

• https://material-ui.com/customization/breakpoints/
• https://cssinjs.org/jss-plugin-nested/?v=v10.1.1#nest-at-rules

以下是使用 Material-UI v5 的类似示例。这已调整为使用styled替代makeStyles和使用theme.breakpoints.down，并theme.breakpoints.between基于该行为变化为这些功能进行了调整（down现在是独家指定的断点，而不是包容和结束断点between现在也是矛盾的，因此对于这那些指定的断点需要与 v4 中使用的断点一致）。此外，min-width直接指定的媒体查询的 已从 调整1280px为1200px以匹配lgv5 中断点的新值。

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

const StyledButton = styled(Button)(({ theme }) => ({
  color: "white",
  [theme.breakpoints.down("sm")]: {
    marginTop: theme.spacing(1),
    backgroundColor: "purple"
  },
  [theme.breakpoints.between("sm", "lg")]: {
    marginTop: theme.spacing(3),
    backgroundColor: "blue"
  },
  "@media (min-width: 1200px)": {
    marginTop: theme.spacing(5),
    backgroundColor: "red"
  }
}));
export default function App() {
  return <StyledButton variant="contained">Hello World!</StyledButton>;
}

关于从 v4 到 v5 的断点更改的文档：https : //next.material-ui.com/guides/migration-v4/#theme