When I try to use an sx prop inside a ThemeProvider tag I am getting the following error:
breakpoints.map is not a function
here is the code:
import { responsiveFontSizes, createTheme } from
'@mui/material/styles';
import { Box, ThemeProvider } from '@mui/material';
import styled from '@emotion/styled';
let theme = createTheme({
palette: {
type: 'dark',
primary: {
main: '#3dde7f',
},
secondary: {
main: '#c83737',
},
background: {
default: '#121212',
paper: '#1a1a1a',
},
},
});
theme = responsiveFontSizes(theme);
export default function Main(props) {
const {accountsStore} = useStores();
return (
<ThemeProvider theme={theme}>
<Box sx={{ gridArea: "menu", paddingTop: "40px", marginTop:
"50px", maxWidth: "300px" }}>
<SideNav accountsStore={accountsStore}/>
</Box>
</ThemeProvider>
);
}I am able to get it to work with styled components. Any help would greatly appreciated.