How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?

问题

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

Is there a way to use CSS @media at the above variable?

if impossible, how can I make my custom css for responsive?

回答1:

Below is an example showing two ways of specifying media queries within makeStyles. You can use up, down, only, and between functions in theme.breakpoints (which generate the media query strings for you based on the breakpoints specified in the theme), or you can use media queries directly.

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>
  );
}