Как передать тему и реквизиты в styled() Material UI-5? ⇐ CSS

[Anonymous]

Код: Выделить всё

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 (


Milan Poudel
MILAN





 setOpen(true)} />










);
};

export default Navbar;

В searchDiv я хочу использовать как тему, так и реквизиты, которые я использовал в SearchDiv ниже (т. е. «открытый» реквизит). Я хочу использовать его в стилизованном виде и в соответствии с его состоянием хочу настроить свойство отображения? Как передать тему и реквизиты в стили нового MUI5? Раньше я мог использовать реквизиты напрямую в MUIv4, но не думаю, что в MUI5 это разрешено

Подробнее здесь: https://stackoverflow.com/questions/708 ... erial-ui-5