Как передать тему по умолчанию, предоставляемую MUI5, и создать стиль для любого компонента в MUI5? ⇐ CSS

[Anonymous]

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

import { styled } from "@mui/system";
import { CardTravel, Home, People } from "@mui/icons-material";
import { Box, Container, Typography } from "@mui/material";
import React from "react";

const BoxContainer = styled(Box)(({ theme }) => ({
display: "flex",
marginBottom: theme.spacing(4),
[theme.breakpoints.up("sm")]: {
marginBottom: theme.spacing(3),
cursor: "pointer",
},
}));

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

const styles = {   //here how can I use theme here  and pass it
iconStyles: {
marginRight: 2,
[theme.breakpoints.up("sm"): { //so I can use here for breakpoints or anything
display: "none",
},
};

const Leftbar = () => {
return (



HomePage



HomePage



HomePage



HomePage


);
};

export default Leftbar;

Здесь в моем коде все значки разные, но их свойства CSS будут одинаковыми. Я не могу использовать styled(), потому что это разные значки. Я пытаюсь определить пользовательские стили и передать их с помощью «sx», определив какstyles.iconStyles. Как я могу использовать тему в этом коде?


Подробнее здесь: https://stackoverflow.com/questions/708 ... le-for-any