如何在 Material UI 5 中使用 useTheme？

Question

我刚刚开始使用 Material UI 5.0.4（带有styled-components），我想在组件中访问主题。我在网上查了一下useTheme，所以我检查了文档并找到了它- @mui/styles/useTheme。但是，它是遗留文档，并且@mui/styles在 MUI 5 中不存在。因此，我查看了@mui/system，并找到了“访问组件中的主题”部分。然而，这只是指向遗留文档！

在文档似乎对我没有帮助之后，我决定使用 Visual Studio Code 的“快速修复”功能，如果您将鼠标悬停在该函数上，VSCode 将为您提供要导入的选项列表。以下是我尝试过的选项列表以及它们不起作用的原因：

• @mui/material/styles/useTheme- 无论如何，返回默认主题对象。查看源代码，这实际上就是它的作用- 它切换到默认主题，然后返回主题。
• @mui/material/private-theming/useTheme- 这才回来null。我觉得我无论如何都不应该访问这个（它说private-），但我还是尝试了。
• @mui/system/useTheme- 这就是我希望能起作用的。然而，这也可能是最奇怪的一个。它为我提供了默认主题，但排除了许多属性。例如，它只提供了palette.mode，除此之外没有其他键palette。（你可以在下面看到整个事情）

{
    "breakpoints": {
        "keys": ["xs", "sm", "md", "lg", "xl"],
        "values": { "xs": 0, "sm": 600, "md": 900, "lg": 1200, "xl": 1536 },
        "unit": "px"
    },
    "direction": "ltr",
    "components": {},
    "palette": { "mode": "light" },
    "shape": { "borderRadius": 4 }
}

• styled-components/useTheme- 返回undefined。
• @mui/styled-engine-sc/useTheme- 返回undefined。（我有一种感觉，这和 是一样的styled-components/useTheme。）

这些就是 VSCode 可以给我的所有建议，除了像@mui/system/useThemevs这样的东西@mui/system/useTheme/useTheme（这是同一件事）。我也尝试过谷歌搜索，但它总是很旧，比如：

• GitHub 上针对 MUI 的问题 #8958，其中引用了@material-ui/core/stylesv4 而非 v5 中的内容
• 所以问题标记为“从外部material-ui组件访问主题”，它引用了遗留文档（@material-ui/styles不再存在，并且@mui/material/styles/useTheme不起作用，如上所述）

请问，如果有人知道，如何在 MUI 5 的组件中获取主题？

Answer 1

事实证明，正确的useTheme是，并且您不能在执行 in 的同一个组件中@mui/material/styles/useTheme使用。例如：useThemeThemeProvider

const App = () => {
    const theme = useTheme();
    return (
        <ThemeProvider theme={myTheme}>
            <Box bgcolor={theme.palette.background.default} width={100} height={100} />
        </ThemeProvider>
    );
};

将无法正常工作。然而，这个：

const MyComponent = () => {
    const theme = useTheme();
    return <Box bgcolor={theme.palette.background.default} width={100} height={100} />;
};

const App = () => (
    <ThemeProvider theme={myTheme}>
        <MyComponent />
    </ThemeProvider>
)

将正常工作，就像useTheme在单独的组件中使用一样。

Answer 2

对于仍在为此苦苦挣扎的人，我通过导入使其工作createTheme，ThemeProvider并且useTheme全部直接从@mui/material...

主题.js：

import { createTheme } from '@mui/material';

export const theme = createTheme({
    ...
});

_app.tsx（我正在使用 next.js）

import { CssBaseline, ThemeProvider } from '@mui/material';
import type { AppProps } from 'next/app';
import React from 'react';

import { theme } from '../theme';

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <React.StrictMode>
            <CssBaseline />
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        </React.StrictMode>
    );
}

export default MyApp;

navigation.tsx（我的带有 useTheme 的组件）

import { Drawer, useTheme } from '@mui/material';
import React from 'react';

const Navigation = (): JSX.Element => {
    const theme = useTheme();

    const drawerSx = {
        '& .MuiDrawer-paper': {
            background: `linear-gradient(to bottom right, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
        },
    };

    return (
        <Drawer sx={drawerSx} variant="permanent">
           ...
        </Drawer>
    );
};

export default Navigation;

在执行此操作之前我很挣扎，它只是应用默认主题，而不是自定义主题。

Answer 3

万一有人想知道为什么你不能useTheme在与 相同的组件中 使用ThemeProvider，那是因为useTheme必须在由 包装的组件中ThemeProvider。该上下文不可用于该组件树之外的组件。