如何传递MUI5提供的默认主题并为MUI5中的任何组件创建样式？

Question

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 (
    <Container
      sx={{
        paddingTop: 2,
        height: "100vh",
        bgcolor: { sm: "white", xs: "primary.main" },
        color: { sm: "#555", xs: "white" },
        border: { sm: "1px solid #ece7e7" },
      }}
    >
      <BoxContainer>
        <Home sx={styles.iconStyles} />
        <TextContainer>HomePage</TextContainer>
      </BoxContainer>
      <BoxContainer>
        <People sx={styles.iconStyles} />
        <TextContainer>HomePage</TextContainer>
      </BoxContainer>
      <BoxContainer>
        <CardTravel sx={styles.iconStyles} />
        <TextContainer>HomePage</TextContainer>
      </BoxContainer>
      <BoxContainer>
        <Home sx={styles.iconStyles} />
        <TextContainer>HomePage</TextContainer>
      </BoxContainer>
    </Container>
  );
};

export default Leftbar;

在这里，在我的代码中，我的所有图标都是不同的，但是它们的css属性将是相同的。我不能使用样式()，因为它们都是不同的图标。我试图定义自定义样式，并试图通过定义为styles.iconStyles传递给"sx“。如何在代码中使用主题？

Answer 1

在index.js中，您可以导入createTheme和ThemeProvider。您可以使用createTheme创建自定义主题，并将ThemeProvider包含在<App/>上。

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: orange[500]
    },
    secondary: {
      main: red[500]
    }
  }
});

<ThemeProvider theme={theme}>
      <App />
</ThemeProvider>

创建您自己的组件，并从您声明的主题中获取颜色。

const SearchDiv = styled("div", {
  shouldForwardProp: (props) => true
})(({ theme, open }) => ({
  display: "flex",
  alignItems: "center",
  backgroundColor: theme.palette.secondary.main,
  width: "50%",
  [theme.breakpoints.down("sm")]: {
    display: open ? "flex" : "none"
  }
}));

检查这里的代码框：看这个