主题不识别material-ui

Question

我是材料 UI 的新手。 不知何故，我的代码无法识别主题参数。 错误出现在“ [theme.breakpoints.up("sm")]”的这行代码中

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

似乎主题是一个参数，仅此而已，我该如何实现“主题”？

这是我的完整页面：

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;

错误：

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

问题是您正在解构主题对象并传递一个不存在的主题属性，您应该将断点属性传递给解构参数，如下所示：

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

请参阅主题对象以了解有关可用属性的更多信息。

Answer 2

问题是样式应该在“@mui/material”中； 不在“@emotion/styled”中

在此处输入图像描述

在此处输入图像描述