If you encountered this error, it is likely due to using styled from the @emotion package. To resolve this issue, switch to using styled from the @mui package.
By making this change, you can also address other issues related to the MUI theme in 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>
);
}
https://codesandbox.io/s/how-can-i-properly-use-material-ui-breakpoints-with-styled-components-zljggu?file=/src/App.tsx