How can I pass default theme that is provided by MUI5 and create a style for any component in MUI5?

Solution 1:

In index.js, you import createTheme and ThemeProvider. You can create your customize your theme using createTheme and enclose ThemeProvider on the <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>

Create your own component and get the color from theme you declared like this one

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"
  }
}));

Check here for the codesandbox: SEE THIS