如何在React項目中實(shí)現主題切換并持久化用戶(hù)偏好設置

要在React項目中實(shí)現主題切換并持久化用戶(hù)偏好設置，可以按照以下步驟進(jìn)行：

1. 創(chuàng )建一個(gè)主題管理器組件，用于管理主題切換的邏輯和狀態(tài)。在該組件中，可以定義一個(gè)狀態(tài)變量來(lái)存儲當前選定的主題，以及一個(gè)方法來(lái)切換主題。

import React, { useState } from 'react';

const ThemeManager = () => {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };

  return (
    <div>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <p>Current Theme: {theme}</p>
    </div>
  );
};

export default ThemeManager;

2. 在根組件中引入主題管理器組件，并在需要應用主題的子組件中使用theme變量來(lái)應用主題樣式。

import React from 'react';
import ThemeManager from './ThemeManager';

const App = () => {
  return (
    <div>
      <ThemeManager />
      <div className="content">
        <h1>Theme Switcher Demo</h1>
        <p>This is a sample text</p>
      </div>
    </div>
  );
};

export default App;

3. 根據用戶(hù)選擇的主題，動(dòng)態(tài)切換應用的樣式。

// styles.scss

.light {
  background-color: #f0f0f0;
  color: #333;
}

.dark {
  background-color: #333;
  color: #f0f0f0;
}

// App.js

import React from 'react';
import ThemeManager from './ThemeManager';
import './styles.scss';

const App = () => {
  return (
    <div className={`app ${localStorage.getItem('theme') || 'light'}`}>
      <ThemeManager />
      <div className="content">
        <h1>Theme Switcher Demo</h1>
        <p>This is a sample text</p>
      </div>
    </div>
  );
};

export default App;

通過(guò)以上步驟，你可以在React項目中實(shí)現主題切換并持久化用戶(hù)偏好設置。當用戶(hù)切換主題時(shí)，應用會(huì )動(dòng)態(tài)改變樣式，并且用戶(hù)的偏好設置會(huì )被保存在本地存儲中，以便下次訪(fǎng)問(wèn)時(shí)重新加載。