簡體   English   中英

React.js:如何在使用 useContext 切換身體時實現暗/亮模式?

[英]React.js: How to implement dark/light mode in body toggling with useContext?

我正在嘗試創建一個背景主題,它將打開onClick onClick 上,它必須更改react appbody的背景顏色。 我已經設法實現了useContext ,現在它可以切換和更改Header 組件中的列表項顏色。 如何將它設置為身體 任何幫助將不勝感激。

這是我的 useContext 顏色組件

import React from 'react'

export const themes = {
  light: {
    foreground: '#ffffff',
  },
  blue: {
    foreground: 'blue',
  },
}

export default React.createContext({
  theme: themes.light,
  switchTheme: () => {},
})

onClick 按鈕組件

import React, { useContext } from 'react'
import ThemeContext from './context'

import './ThemedButton.scss'

const ThemedButton = () => {
  const { switchTheme } = useContext(ThemeContext)

  return (
    <>
      <button className="btn" onClick={switchTheme}>
        Switch
      </button>
    </>
  )
}

export default ThemedButton 

應用程序.js

import React, { useState } from 'react'

import SearchBar from './components/SearchBar';
import useCountries from './Hooks/useCountries';
import MainTable from './components/MainTable';
import ThemeButton from './useContext/ThemedButton';
import ThemeContext from './useContext/context';

import { searchProps } from './types';
import { themes } from './useContext/context';
import Routes from './Routes';


import './App.scss'

export default function App() {
  const [search, setSearch] = useState('')
  const [data] = useCountries(search)
  const [context, setContext] = useState({
    theme: themes.light,
    switchTheme: () => {
      setContext((current) => ({
        ...current,
        theme: current.theme === themes.light ? themes.blue : themes.light,
      }))
    },
  })

  const handleChange: React.ReactEventHandler<HTMLInputElement> = (e): void => {
    setSearch(e.currentTarget.value)
  }

  return (
    <div className="App">
      <SearchBar handleChange={handleChange} search={search as searchProps} />

      <ThemeContext.Provider value={context}>
        <ThemeButton />
        <MainTable countries={data} />
      </ThemeContext.Provider>

      <Routes />
    </div>
  )
}

標題組件

import React, { useContext } from 'react'

import ThemeContext from '../../useContext/context'


import './Header.scss'

export default function Header() {
  const { theme } = useContext(ThemeContext)

  return (
    <div className="header">
      <ul className="HeadtableRow" style={{ color: theme.foreground }}> // here it's set to change list items color
        <li>Flag</li>
        <li>Name</li>
        <li>Language</li>
        <li>Population</li>
        <li>Region</li>

      </ul>
    </div>
  )
}

如果您想更改應用程序中的body標記,則需要修改DOM並且可以將此代碼添加到 Header.js(或上下文中的任何其他文件)文件中:

useEffect(() => {
    const body = document.getElementsByTagName("body");
    body[0].style.backgroundColor = theme.foreground
  },[])

*** 不要忘記導入useEffect

*** 像下面這樣的內聯樣式是比直接修改DOM更好的方法

<div className="App" style={{backgroundColor: context.theme.foreground}}> 
     //For under context files just use theme.foreground
      <SearchBar handleChange={handleChange} search={search as searchProps} />
      <ThemeContext.Provider value={context}>
        <ThemeButton />
        <MainTable countries={data} />
      </ThemeContext.Provider>

      <Routes />
    </div>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM