如何在资料UI 5中使用useTheme？

Question

我刚刚开始使用MaterialUI5.0.4(使用styled-components)，我想在组件中访问主题。我在网上看到了useTheme，所以我检查了文档和找到了 - @mui/styles/useTheme。然而，这是遗留文档，而@mui/styles并不存在于MUI 5中。因此，我转而查看了@mui/system，并找到了“在组件中访问主题”一节。但是，这只是指向遗留文档！

在文档似乎帮不了我之后，我决定使用的"Quick“功能，如果您悬停在函数上，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/useTheme和@mui/system/useTheme/useTheme (这是一样的)。我也尝试过搜索一些东西，但它总是很老的，比如：

• 关于GitHub的MUI问题#8958，它引用@material-ui/core/styles，它是v4，而不是在v5中
• 引用遗留文档的因此题为“从外部材料-ui组件访问主题”。 (@material-ui/styles不再存在，@mui/material/styles/useTheme不像上面解释的那样工作)

请，如果有人知道，您如何在MUI 5组件中获得主题？

Answer 1

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

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

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

Answer 3

对于任何仍在努力解决这个问题的人，我通过从createTheme、ThemeProvider和useTheme直接从@mui/material进口.

theme.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 (my component with 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;

在此之前，我一直在挣扎，它只是应用默认的主题，而不是自定义的主题。