theme does not recognize material-ui

Question

I am new in material UI. somehow my code doesn't recognize the theme parameter. the error is in this line of code on " [theme.breakpoints.up("sm")]"

const Icons = styled(Box)(({ theme }) => ({
  display: "none",
  gap: "20px",
  alignItems: "center",
  [theme.breakpoints.up("sm")]: {
    display: "flex",
  },
}));

It seems that theme is a parameter and nothing more, how can I implement the "theme"?

here is my full page:

import styled from "@emotion/styled";
import { Notifications, Pets } from "@mui/icons-material";
import {
  AppBar,
  Avatar,
  Badge,
  Box,
  InputBase,
  Toolbar,
  Typography,
} from "@mui/material";
import MailIcon from "@mui/icons-material/Mail";
import React from "react";

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

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

const Icons = styled(Box)(({ theme }) => ({
  display: "none",
  gap: "20px",
  alignItems: "center",
  [theme.breakpoints.up("sm")]: {
    display: "flex",
  },
}));

const UserBox = styled(Box)(({ theme }) => ({
  display: "flex",
  gap: "10px",
  alignItems: "center",
}));

const Navbar = () => {
  return (
    <AppBar position="sticky">
      <StyledToolbar>
        <Typography variant="h6" sx={{ display: { xs: "none", sm: "block" } }}>
          My App
        </Typography>
        <Pets sx={{ display: { xs: "block", sm: "none" } }} />
        <Search>
          <InputBase placeholder="search..." />
        </Search>
        <Icons>
          <Badge badgeContent={4} color="error">
            <MailIcon />
          </Badge>
          <Badge badgeContent={4} color="error">
            <Notifications />
          </Badge>
          <Avatar
            sx={{ width: 30, height: 30 }}
            src="https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
          />
        </Icons>
        <UserBox>
          <Avatar
            sx={{ width: 30, height: 30 }}
            src="https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
          />
          <Typography variant="span">Jhon</Typography>
        </UserBox>
      </StyledToolbar>
    </AppBar>
  );
};

export default Navbar;

The Error:

Uncaught TypeError: Cannot read properties of undefined (reading 'up')
    at Navbar.js:31:1
    at handleInterpolation (emotion-serialize.browser.esm.js:137:1)
    at serializeStyles (emotion-serialize.browser.esm.js:251:1)
    at emotion-styled-base.browser.esm.js:131:1
    at emotion-element-cbed451f.browser.esm.js:36:1
    at renderWithHooks (react-dom.development.js:16141:1)
    at updateForwardRef (react-dom.development.js:19968:1)
    at beginWork (react-dom.development.js:22391:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)

Answer 1

The problem is that you are destructuring the theme object and passing a theme property who doesn't exist, you should pass the breakpoint property to the destructured parameter, like so:

const Icons = styled(Box)(({ breakpoints }) => ({
  display: "none",
  gap: "20px",
  alignItems: "center",
  [breakpoints.up("sm")]: {
    display: "flex",
  },
}));

See the theme object to know more about the available properties.

Answer 2

The problem is Styled should be in "@mui/material"; not in "@emotion/styled"

enter image description here

enter image description here