Как я могу использовать CSS @media для отклика с makeStyles на Reactjs Material UI?

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. Вы можете использовать функции up, down, only и between в theme.breakpoints (которые генерируют для вас строки медиа-запроса на основе точек останова, указанных в теме), или Вы можете использовать медиазапросы напрямую.

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 -на правилах