reactjs - 如何在 Material UI-5 的 styled() 中同时传递主题和 Prop ？

Question

import {
  AppBar,
  Avatar,
  Badge,
  InputBase,
  Toolbar,
  Typography,
} from "@mui/material";
import React, { useState } from "react";
import { styled, alpha } from "@mui/material/styles";
import { Mail, Notifications, Search } from "@mui/icons-material";

const LogoLg = styled(Typography)(({ theme }) => ({
  display: "none",
  [theme.breakpoints.up("sm")]: {
    display: "block",
  },
}));

const LogoSm = styled(Typography)(({ theme }) => ({
  display: "none",
  [theme.breakpoints.down("sm")]: {
    display: "block",
  },
}));

const SearchDiv = styled("div")(({ theme, props }) => ({
  display: "flex",
  alignItems: "center",
  backgroundColor: alpha(theme.palette.common.white, 0.15),
  borderRadius: theme.shape.borderRadius,
  width: "50%",
  "&:hover": {
    backgroundColor: alpha(theme.palette.common.white, 0.15),
  },
  [theme.breakpoints.down("sm")]: {
    display: props.open ? "flex" : "none",
  },
}));

const IconsDiv = styled("div")((theme) => ({
  display: "flex",
  alignItems: "center",
}));

const BadgeItem = styled(Badge)(({ theme }) => ({
  marginRight: theme.spacing(2),
}));

const SearchButton = styled(Search)(({ theme }) => ({
  marginRight: theme.spacing(2),
}));

const Navbar = () => {
  const [open, setOpen] = useState(false);
  return (
    <AppBar>
      <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
        <LogoLg variant="h6">Milan Poudel</LogoLg>
        <LogoSm variant="h6">MILAN</LogoSm>
        <SearchDiv open={open}>
          <Search />
          <InputBase
            placeholder="Search..."
            sx={{ color: "white", marginLeft: "10px" }}
          />
        </SearchDiv>
        <IconsDiv>
          <SearchButton onClick={() => setOpen(true)} />
          <BadgeItem badgeContent={4} color="error">
            <Mail />
          </BadgeItem>
          <BadgeItem badgeContent={2} color="error">
            <Notifications />
          </BadgeItem>
          <Avatar
            alt="milan-poudel"
            src="https://i.ytimg.com/vi/CmSc_EIqyQI/maxresdefault.jpg"
          />
        </IconsDiv>
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;

在 searchDiv 中，我想同时使用主题和我在下面的 SearchDiv 中使用的 Prop (即“打开” Prop )。我想在样式中使用它并根据它的状态自定义显示属性？如何将主题和 Prop 同时传递给新 MUI5 中的样式？以前我可以在 MUIv4 中直接使用 Prop ，但我认为在 MUI5 中不允许这样做

Answer 1

来自 styled API Documentation 的签名:
styled(Component, [options])(styles) => 组件

Prop 被传递到 styles 参数(从那里你也解构和检索 theme)，所以你可以添加你的 open 属性并直接使用它——例如:

// 1. Added `open` to `styles` param
const SearchDiv = styled("div")(({ theme, open }) => ({

  ...

  // 2. Changed `props.open` to `open` below 
  [theme.breakpoints.down("sm")]: {
    display: open ? "flex" : "none",
  },
}));

// Unchanged
<SearchDiv open={open}>
  ...
</SearchDiv>

演示用法的简单工作示例:https://codesandbox.io/s/simple-mui5-props-example-1uclg?file=/src/Demo.js