typescript - ¿Cómo puedo usar correctamente los puntos de interrupción de Material UI con componentes estilizados?

Tengo:

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

Pero TypeScript se queja: La propiedad 'breakpoints' no existe en el tipo 'Theme'.ts(2339)

Respuesta #1

Recibiste este error porque estás usando styled del paquete @emotion, para evitar esto usa styled del paquete @mui.

Esto también soluciona otros problemas con el tema MUI en Typescript:

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