Theme.breakpoints is undefined in MUI React

Question

Whenever I try to use theme.brekpoints.up , I always encounter the same error theme.breakpoints is undefined on console. version that I am using are "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.6.2", "@mui/material": "^5.6.2", "@mui/styles": "^5.6.2"

Here is my NavBar

import styled from '@emotion/styled'
import { AppBar, Badge, InputBase, Toolbar, Typography,Avatar } from '@mui/material';
import FacebookIcon from '@mui/icons-material/Facebook';
import React from 'react';
import { Box } from '@mui/system'
import MailIcon from '@mui/icons-material/Mail';
import NotificationsIcon from '@mui/icons-material/Notifications';


const StyledToolBar = styled(Toolbar)({
  display:"flex",
  justifyContent:"space-between",
});

const SearchBar = styled("div")(({theme}) => ({
    backgroundColor:"white",
    padding:"0 10px",
    borderRadius:"3px",
    width:"40%"
}));

const IconContainer = styled(Box)( ({theme}) => ({
    display:'none',
    gap:"20px",
    alignItems:"center",

}));

const UserBox = styled(Box) ( ({theme}) => ({
  display:'flex',
  gap:"10px",
  alignItems:"center",
  [theme.breakpoints.up("sm")]:{
    display: "flex"
  }
}));
export default function NavBar() {
  return (
    <AppBar position='sticky'> 
      <StyledToolBar>
        <Typography variant='h6' sx={{display:{xs:"none",sm:"block"}}}>
          Mero Book
        </Typography>
        <FacebookIcon sx={{display:{xs:"block",sm:"none"}}}/>
        <SearchBar><InputBase placeholder='Search'/></SearchBar>
        <IconContainer>
          <Badge badgeContent={4} color="error"> <MailIcon /> </Badge>
          <Badge badgeContent={4} color="error"> <NotificationsIcon /> </Badge>
          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" sx={{width:30,height:30}} />
        </IconContainer>
        <UserBox>
        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" sx={{width:30,height:30}} />
        <Typography>Remy Sharp</Typography>
        </UserBox>
      </StyledToolBar>
    </AppBar>
  )
}

Here is my App.js

import { Stack } from '@mui/material';
import { Box } from '@mui/system';
import Feed from './Components/Feed';
import NavBar from './Components/NavBar';
import RightBar from './Components/RightBar';
import SideBar from './Components/SideBar';

function App() {
  return (
   <Box>
   <NavBar/>
  <Stack direction="row" justifyContent='space-between' spacing={2}>
  <SideBar/>
   <Feed/>
   <RightBar/>
  </Stack>
   </Box>
  );
}

export default App;

Here is my index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

version

{
  "name": "mui_learn",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.6.2",
    "@mui/material": "^5.6.2",
    "@mui/styles": "^5.6.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

Wrong import. It should be:

import { styled } from '@mui/material/styles'