主題不識別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”中

在此處輸入圖像描述

在此處輸入圖像描述