为什么 MUI 中的主题断点不起作用？答案

【问题标题】：Why the Theme breakpoints in MUI is not working?为什么 MUI 中的主题断点不起作用？
【发布时间】：2022-01-19 09:48:51
【问题描述】：

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

Link CodeSandbox

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

【讨论】：

非常感谢。祝你一切顺利！

【解决方案2】：

在 v5 中，ThemeProvider 应在应用程序的根目录中定义，useStyles 不应在 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>;
}

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

【讨论】：

非常感谢。祝你一切顺利！