13
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?

keikai
  • 14,085
  • 9
  • 49
  • 68
forevereffort
  • 432
  • 1
  • 3
  • 14
  • You can try to use the breakpoints that Material-UI already have https://material-ui.com/customization/breakpoints/ You can also change the breakpoints value to your custom values – Sabbin Apr 03 '20 at 11:55

1 Answers1

33

Below is an example showing two ways of specifying media queries within makeStyles (further down is a v5 example using styled). 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>
  );
}

Edit media queries

Related documentation:

Below is a similar example using v5 of Material-UI. This has been adjusted to use styled instead of makeStyles and the usage of theme.breakpoints.down and theme.breakpoints.between has been adjusted based on the changes in behavior for those functions (down is now exclusive of the specified breakpoint rather than inclusive and the end breakpoint for between is also now exclusive, so for both of those the breakpoint specified needs to be one up from what would have been used in v4). Also, the min-width of the media-query that is specified directly has been adjusted from 1280px to 1200px to match the new value of the lg breakpoint in v5.

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

Edit media queries

Documentation on changes to breakpoints from v4 to v5: https://next.material-ui.com/guides/migration-v4/#theme

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
  • also can you help my another question? how can I make pixel perfect deign by using Box, Paper, Grid, Container...? for pixel perfect, do I have to use my custom CSS? what is the best way to look as a profession? I am also frontend developer that know well about HTML5, CSS3, Sass and Webpack. but I am new to ReactJS. – forevereffort Apr 04 '20 at 03:54
  • I'm not sure what you mean by "pixel perfect", but if you know how to do it with HTML5 and CSS3, then you can do the same thing using React. It is just the mechanism for generating the HTML and CSS that is different. – Ryan Cogswell Apr 04 '20 at 03:56
  • at the above my code, I used makeStyles for button style. but it seems to be complex. I am not sure why I have to use MakeStyles. if you make me clear about this, I am thanksful. – forevereffort Apr 04 '20 at 04:50
  • 1
    You don’t have to use ‘makeStyles’. There are many options for how to manage CSS and this is one. Choosing a styling approach is a much bigger topic than what I can cover in comments. – Ryan Cogswell Apr 04 '20 at 12:12