如何在资料UI-5的样式()中传递主题和道具？

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中使用的主题和道具(即“打开”道具)。我想在样式中使用它，根据它的状态，要自定义display属性吗？如何将主题和道具传递给新MUI5中的样式？以前，我可以在MUIv4中直接使用道具，但我认为在MUI5中是不允许的

Answer 1

来自styled API Documentation的签名

styled(Component, [options])(styles) => Component

道具被传递到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