如何获取 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 主题的上下文。

我到处搜索，但似乎他们没有在任何地方公开上下文。我在 中找到了 3 个上下文private-theming，styled-engine但styled-engine-sc没有一个起作用。

我怎样才能做到这一点 ？

Answer 1

您创建错误主题的方式应该如下所示：

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

使用属性选项板。

以及可以使用 hook 获取值的方法useTheme。

第一次导入

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

在组件内部，您可以使用为主题设置的调色板，例如：

const { palette } = useTheme();