如何正确使用带有样式组件的 Material UI 断点？答案

【问题标题】：How can I properly use Material UI breakpoints with styled components?如何正确使用带有样式组件的 Material UI 断点？
【发布时间】：2022-08-03 05:12:59
【问题描述】：

我有：

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)

标签： typescript material-ui styled-components

【解决方案1】：

您收到此错误是因为您正在使用风格来自import styled from '@emotion/styled'，避免这种使用风格来自材料风格import { styled } from '@mui/material/styles';

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

【讨论】：