Material UI adjust style based on breakpoint

 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>

  );

}

references:

https://material-ui.com/customization/breakpoints/