I am learning about MUI and got this error. The purpose of the code is to be responsive. Thank you very much.

Link CodeSandbox

CodePudding user response：

import { styled } from '@mui/material/styles';


const useStyles = styled((theme) => ({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px",
    [theme.breakpoints.down("md")]: {
      height: 100
    }
  }
}));

CodePudding user response：

In v5, ThemeProvider should be defined at the root of your application and useStyles should not be called before ThemeProvider

Reference link

Referenced Sandbox link

import ReactDOM from "react-dom";
import {
  ThemeProvider,
  createTheme,
  StyledEngineProvider
} from "@mui/material/styles";

import Demo from "./demo";
const theme = createTheme();

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <StyledEngineProvider injectFirst>
      <Demo />
    </StyledEngineProvider>
  </ThemeProvider>,
  document.querySelector("#root")
);

import { makeStyles } from "@mui/styles";
import Button from "@mui/material/Button";

const useStyles = makeStyles((theme) => ({
  root: {
    background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
    border: 0,
    borderRadius: 3,
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    color: "white",
    height: 48,
    padding: "0 30px",
    [theme.breakpoints.down("md")]: {
      padding: "40px"
    }
  }
}));

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Styled with Hook API</Button>;
}

Using styled component API

import { styled } from "@mui/material/styles";

const MyButton = styled("button")(({ theme }) => ({
  background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
  border: 0,
  borderRadius: 3,
  boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
  color: "white",
  height: 48,
  padding: "0 30px",
  [theme.breakpoints.down("sm")]: {
    background: "blue"
  }
}));

export default function Hook() {
  return <MyButton>something</MyButton>
}