反应打字稿 |如何使用顺风启用暗模式？答案

【问题标题】：React Typescript | How can I enable dark mode using tailwind?反应打字稿 |如何使用顺风启用暗模式？
【发布时间】：2021-11-25 06:20:34
【问题描述】：

我被困在为我的 react/typescript 元素启用暗模式。我创建了一个 Context.Provider 来为整个应用程序切换明暗模式，但切换根本不起作用。如果有人知道如何解决它，请帮助。

这是 ThemeContext 和 ContextProvider

import { createContext, useState, useEffect } from 'react'

type ThemeName = 'light' | 'dark' | string
type ThemeContextType = {
  theme: ThemeName
  setTheme: (name: ThemeName) => void
}

const getInitialTheme = () => {
  if (typeof window !== 'undefined' && window.localStorage) {
    const storedPrefs = window.localStorage.getItem('color-theme')
    if (typeof storedPrefs === 'string') {
      return storedPrefs
    }

    const userMedia = window.matchMedia('(prefers-color-scheme:dark)')
    if (userMedia.matches) {
      return 'dark'
    }
  }
  // returning default theme here
  return 'light'
}

export const ThemeContext = createContext<ThemeContextType>({} as ThemeContextType)

export const ThemeProvider = ({ initialTheme, children }) => {
  const [theme, setTheme] = useState(getInitialTheme)


  const rawSetTheme = theme => {
//Updated rawSetTheme to theme above//
    const root = window.document.documentElement
    const isDark = theme === 'dark'

    root.classList.remove(isDark ? 'light' : 'dark')
    root.classList.add(theme)

    localStorage.setItem('color-theme', theme)
  }

  if (initialTheme) {
    rawSetTheme(initialTheme)
  }

  useEffect(() => {
    rawSetTheme(theme)
  }, [theme])

  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>
}

这是 index.tsx。

ReactDOM.render(
  <ThemeProvider>
    <App />, document.getElementById('root')
  </ThemeProvider>
)

这就是切换

export const DarkModeToggle: VFC<Props> = memo(() => {
  const { theme, setTheme } = useContext(ThemeContext)

  function isDark() {
    return theme === 'dark'
  }

  function toggleTheme(e) {
    setTheme(e.target.checked ? 'dark' : 'light')
  }
  return (
    <div className='flex flex-col'>
      <label htmlFor='unchecked' className='mt-3 inline-flex items-center cursor-pointer'>
        <span className='relative'>
          <span className='block w-10 h-6 bg-gray-200 rounded-full shadow-inner'></span>
          <span
            className={`${
              theme === 'dark' ? 'bg-indigo-400 transform translate-x-full' : 'bg-white'
            } absolute block w-4 h-4 mt-1 ml-1  rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition-transform duration-300 ease-in-out`}
          >
            <input
              id='darkmode'
              onClick={e => toggleTheme(e)}
              type='checkbox'
              checked={isDark()}
              className='absolute opacity-0 w-0 h-0'
            />
          </span>
        </span>
        <span className='ml-3 text-sm'>{theme === 'dark' ? 'ON' : 'OFF'}</span>
      </label>
    </div>
  )
})

更新：我将变量的 'rawSetTheme' 更改为 'theme'，但它在 App.tsx 中返回错误，如下所示。如果您有任何建议，我们将不胜感激。

Property 'initialTheme' is missing in type '{ children: Element; }' but required in type '{ initialTheme: any; children: any; }'.  TS2741

     7 | export default function App() {
     8 |   return (
  >  9 |     <ThemeProvider>
       |      ^
    10 |       <Router />
    11 |     </ThemeProvider>
    12 |   )

【问题讨论】：

应用这个主题的 CSS 是什么？
假设 rawSetTheme 每次都被命中，并且 HTML 标签和本地存储上的类值发生变化。
这里是 index.css （省略超出字符限制）：root { @apply light; } .dark { --color-bg-primary: #1F2937; } .light { --color-bg-primary: #F3F4F6; }
为什么css文件中有sass？
这是顺风。我添加了深色/浅色配色方案，以便我可以切换。黑暗模式：“类”，主题：{扩展：{背景颜色：{主要：“var（--color-bg-primary）”，次要：“var（--color-bg-secondary）”，}，textColor：{重音：'var（--color-text-accent）'，主要：'var（--color-text-primary）'，次要：'var（--color-text-secondary）'，}，```

标签： javascript typescript tailwind-css

【解决方案1】：

感谢您的评论。我可以修复它。这只是 Toggle.tsx 的一个小错误。顺风延伸设置也可以正常工作。

export const DarkModeToggle: VFC<Props> = memo(() => {
  const { theme, setTheme } = useContext(ThemeContext)
  
  return (

    <div className='flex flex-col'>
      <label className='mt-3 inline-flex items-center cursor-pointer'>
        <span className='relative'>
          <span className='block w-10 h-6 bg-gray-200 rounded-full shadow-inner'></span>
          <span
            className={`${
              theme === 'dark' ? 'bg-indigo-400 transform translate-x-full' : 'bg-white'
            } absolute block w-4 h-4 mt-1 ml-1  rounded-full shadow inset-y-0 left-0 focus-within:shadow-outline transition-transform duration-300 ease-in-out`}
          >
            <input onClick={()=>setTheme(theme==='dark'?'light':'dark')} className='absolute opacity-0 w-0 h-0' />
          </span>
        </span>
        <span className='ml-3 text-sm'>{theme === 'dark' ? 'ON' : 'OFF'}</span>
      </label>
    </div>
  )
})

【讨论】：