如何获得MUI主题的上下文?

Question

这就是如何使用MUI创建和传播主题。

import { ThemeProvider } from "@mui/material";
const myTheme = createTheme({
backgroundColor: {
primary: "#f9f9fb",
secondary: "#ededf3",
tertiary: "#cbcbdc",
},
})
const Index: FC = () => {
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
};

现在，出于某种原因，我需要在我的应用程序中获得MUI主题的上下文。

我到处搜索，但似乎他们没有在任何地方暴露上下文。我在private-theming,styled-engine和styled-engine-sc中发现了3个上下文，但它们都不起作用。

我该怎么做呢?

Answer 1

创建错误主题的方法应该如下:

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

与属性面板。

和获取值的方法，您可以使用钩子useTheme。

第一次进口

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

，在你的组件中，你可以使用你为主题设置的调色板，比如:

const { palette } = useTheme();

Answer 2

MUI使用样式引擎提供的上下文:

import { ThemeContext } from '@mui/styled-engine';

它也可以直接从你选择的引擎(emotion在下面的例子中)导入:

import { ThemeContext } from '@emotion/react';