React Typescript |我如何使用顺风启用暗模式?

Question

我在为react/typescript元素启用暗模式时卡住了。我创建了一个上下文。为整个应用程序切换亮/暗模式，但这种切换根本不起作用。如果有人知道如何修复它，请帮助。

这是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>
}

这是索引。tsx。

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

这是Toggle

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'变量，但它返回一个错误"如下图所示。如果您有任何建议，我将不胜感激。

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 |   )

Answer 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>
)
})