主题中useState的访问值[关闭]答案

【问题标题】：Access value of useState in theme [closed]主题中useState的访问值[关闭]
【发布时间】：2021-01-19 12:43:59
【问题描述】：

我正在使用 MaterialUI 构建一个 React NextJS 应用程序。我有一个带有开关的标题组件，我基本上想用它在我的主题文件（单独的文件）中在暗模式和亮模式之间切换。基本上，我的问题是我如何才能基本上获得我在主题文件中的 Switch 上使用的 useState 的值，以在暗模式和亮模式之间切换。谢谢！ ~最大

编辑 2：stackblitz 示例 https://stackblitz.com/edit/react-ts-hmqdnk?file=NavBar.tsx

【问题讨论】：

欢迎使用stackoverflow..请提供代码，当您要求复制时...并提及用户提及，我猜...
感谢您将链接添加到您的代码中。更多上下文会有所帮助，因为它不清楚您的案例的组件树是什么样的。考虑在stackblitz.com 上创建一个简化示例并将其链接到您的问题中。

标签： reactjs material-ui next.js use-state

【解决方案1】：

您可以根据作为 Switch 组件值的函数参数创建一个返回深色或浅色主题的函数。

const getTheme = (light) => {
    let lightTheme = {
        palette: {
            type: 'light',
        }
    }

    let darkTheme = {
        palette: {
            type: 'dark',
        }
    }
    
    return createMuiTheme(light ? lightTheme : darkTheme)
}

【讨论】：