如何在样式组件中正确使用 Material UI 断点？

Question

我有：

const FooterBox = styled(Box)`
  background: #4e738a;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  color: #ffffff;


  ${p => p?.theme?.breakpoints.up('xs')} {
     margin: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
   }

   ${p => p?.theme?.breakpoints.up('md')} {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
`;

但 TypeScript 正在抱怨：Property 'breakpoints' does not exist on type 'Theme'.ts(2339)

Answer 1

您收到此错误是因为您正在使用@emotion包中的 样式，以避免使用@mui包中的样式。

这还修复了 Typescript 中 MUI 主题的其他问题：

• Property 'shapes' does not exist on type 'Theme'.ts(2339)
• Property 'breakpoints' does not exist on type 'Theme'.ts(2339)
• Property 'transitions' does not exist on type 'Theme'.ts(2339)
• Property 'palette' does not exist on type 'Theme'.ts(2339)
• ...

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

const FooterBox = styled(Box)(({ theme }) => ({
  background: "#4e738a",
  left: 0,
  right: 0,
  bottom: 0,
  width: "100%",
  color: "#ffffff",

  [theme.breakpoints.up("xs")]: {
    margin: "auto",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "space-between"
  },

  [theme.breakpoints.up("md")]: {
    margin: "auto",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "space-between"
  }
}));

export default function App() {
  return (
    <div className="App">
      <FooterBox>Hello Wolrd!</FooterBox>
    </div>
  );
}