MaterialUI useTheme在嵌套布局中返回错误主题的原因排查

相关代码 #

WebLayout组件 #

export default function WebLayout() {
    return (
        <ThemeProvider theme={DefaultTheme}>
            <CssBaseline />
            {children}
        </ThemeProvider>
    )
}

DashboardLayout组件 #

export default function DashboardLayout() {
    const theme = useTheme()

    return (
        <WebLayout>
            <div className="dashboard">
                {children}
            </div>
        </WebLayout>
    )
}

问题详情 #

在WebLayout中直接打印DefaultTheme能得到自定义的默认主题，但在DashboardLayout中用useTheme()获取并打印的theme却和自定义主题不一样，这是为什么？

解答 #

核心原因是useTheme的调用位置不在ThemeProvider的上下文范围内：

• DashboardLayout组件执行时，会先跑自身的代码逻辑（包括调用useTheme()），这时候它还没有被包裹进WebLayout的ThemeProvider里——毕竟<WebLayout>是DashboardLayout的返回内容，组件自身的逻辑是在WebLayout的上下文之外执行的。
• 所以此时useTheme()拿到的是MUI的全局默认主题，或者是你应用里更上层（比如入口文件）存在的其他ThemeProvider提供的主题，而非WebLayout中传入的DefaultTheme。

如果要在DashboardLayout里获取到WebLayout的自定义主题，可以把useTheme()的调用放到WebLayout上下文内部的组件中，比如调整结构：

export default function DashboardLayout({ children }) {
    const InnerContent = () => {
        const theme = useTheme()
        console.log(theme) // 这里就能拿到WebLayout的DefaultTheme了
        return <div className="dashboard">{children}</div>
    }

    return (
        <WebLayout>
            <InnerContent />
        </WebLayout>
    )
}

内容的提问来源于stack exchange，提问作者ignaciodev