How can i get the context of the MUI theme?

Question

This is how you create a theme and propagate it using MUI.

import { ThemeProvider } from "@mui/material";

const myTheme = createTheme({
  backgroundColor: {
    primary: "#f9f9fb",
    secondary: "#ededf3",
    tertiary: "#cbcbdc",
  },
})

const Index: FC = () => {
   <ThemeProvider theme={theme}>
       <App />
   </ThemeProvider>
};

Now, for some reason, I need to get the context of the MUI theme in my app.

I've search everywhere but it seems that they do not expose the context anywhere. I found 3 contexts in private-theming, styled-engine and styled-engine-sc but none of them worked.

How can I do that ?

Answer 1

The way you create the theme it wrong should be like following:

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

with the property palette.

and the way to get values you could use the hook useTheme .

first import

import { useTheme } from "@mui/material";

and inside your components you can use the palette you set to your theme like:

const { palette } = useTheme();