时间戳

首页 > 解决方案 > 在 React 中在暗模式和亮模式之间切换

javascript - 在 React 中在暗模式和亮模式之间切换

问题描述

我正在使用useDarkModeReact 中的库。

import useDarkMode from 'use-dark-mode'

const DarkModeToggle = () => {
    const darkMode = useDarkMode(false)
    return (
        <>
            {darkMode ? (
                <button type="button" onClick={darkMode.disable}>
                    ☀
                </button>
            ) : (
                <button type="button" onClick={darkMode.enable}>
                    ☾
                </button>
            )}

        </>
    )
}

我希望按钮在太阳和月亮之间切换，并且能够在暗模式和亮模式之间切换。我似乎无法弄清楚如何做到这一点，我也尝试过使用钩子但没有运气。

标签： javascriptreactjsreact-hooksstyling

解决方案

根据文档useDarkMode()返回一个具有以下属性的对象value：

value：一个布尔值，包含暗模式的当前状态。

所以很可能你可以尝试以下方法：

{darkMode.value ? (
   <button type="button" onClick={darkMode.disable}>
       ☀
   </button>
) : (
   <button type="button" onClick={darkMode.enable}>
       ☾
   </button>
)}

我希望这有帮助！

推荐阅读