为什么MUI中的Theme断点不起作用

Question

我正在学习MUI并收到此错误。代码的目的是响应。非常感谢。

链接代码沙盒

Answer 1

在v5中，应在应用程序的根目录中定义ThemeProvider，并且不应在ThemeProvider之前调用useStyles

参考链路

引用的沙盒链接

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

使用样式组件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>
}

Answer 2

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