深色模式切换问题

Question

以下是我的 DarkMode.jsx 组件。当我切换按钮时，暗黑模式仅应用于导航栏。网站的其他部分并未改变为暗色主题。请问在使用 Material-UI 的情况下，我应该如何让状态在整个网站中保持更新？

import React, { useState } from 'react';
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import { Switch } from "@mui/material";

export default function DarkMode() {
  // 管理暗黑模式的状态
  const [toggleDarkMode, setToggleDarkMode] = useState(true);

  // 切换暗黑模式的函数
  const toggleDarkTheme = () => {
    setToggleDarkMode(!toggleDarkMode);
  };

  // 应用主色和副色主题配置
  const darkTheme = createTheme({
    palette: {
      mode: toggleDarkMode ? 'dark' : 'light', // 根据切换状态处理暗黑模式
      primary: {
        main: '#90caf9',
      },
      secondary: {
        main: '#131052',
      },
    },
  });

  return (
    
      
      
        切换暗黑模式
        
      
    
  );
}

我在 Main.jsx 文件中，在 Navbar 组件之后引入了 DarkMode 组件。

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
// import App from './App'
import Navbar from './Components/components/Navbar';
import Hero from './Components/components/Hero';
import About from './Components/components/About';
import Feature from './Components/components/Feature';
import Card from './Components/components/Card';
import Opensource from './Components/components/Opensource';
import Footer from './Components/components/Footer';
import Workshop from './Components/components/Workshop';
import DarkMode from './Components/components/DarkMode';

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
    
    
    
    
    
    
    
    
  ,
)

为了使整个网站在切换暗黑模式时都能应用相应的主题，你需要将 DarkMode 组件提升至一个更高级别的组件，并确保所有子组件都在 ThemeProvider 包裹之下。例如，可以在 Main 组件或一个更高层级的组件中包裹所有的内容：

// 修改后的 Main.jsx 示例
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
// import App from './App'
import Navbar from './Components/components/Navbar';
import Hero from './Components/components/Hero';
import About from './Components/components/About';
import Feature from './Components/components/Feature';
import Card from './Components/components/Card';
import Opensource from './Components/components/Opensource';
import Footer from './Components/components/Footer';
import Workshop from './Components/components/Workshop';
import DarkMode from './Components/components/DarkMode';

function Main() {
  const [toggleDarkMode, setToggleDarkMode] = useState(true);
  
  const darkTheme = createTheme({
    // ... 创建主题对象的代码 ...
  });

  return (
    
      
      
      
      
      
      
      
      
      
    
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
  ,
)

Mark Rotteveel · Answer

首先，在 DarkMode 组件中，你需要返回 children 属性。为什么呢？因为在你的结构中，你只在 DarkMode 组件内创建了主题，而其他组件并没有访问到这个主题。

import React, { useState } from 'react';
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import { Switch } from "@mui/material";

export default function DarkMode({ children }) {

  // 管理暗黑模式的状态
  const [toggleDarkMode, setToggleDarkMode] = useState(true);

  // 切换暗黑模式的函数
  const toggleDarkTheme = () => {
    setToggleDarkMode(!toggleDarkMode);
  };

  // 应用主色和副色主题配置
  const darkTheme = createTheme({
    palette: {
      mode: toggleDarkMode ? 'dark' : 'light', // 在切换时处理暗黑模式状态
      primary: {
        main: '#90caf9',
      },
      secondary: {
        main: '#131052',
      },
    },
  });

  return (
    
      
      
        切换暗黑模式
        
      
      {children} {/* 添加这一行以显示传递给 DarkMode 组件的所有子组件 */}
    
  );
}

然后，将 Main.jsx 改为以下内容：

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
// import App from './App'
import Navbar from './Components/components/Navbar';
import Hero from './Components/components/Hero';
import About from './Components/components/About';
import Feature from './Components/components/Feature';
import Card from './Components/components/Card';
import Opensource from './Components/components/Opensource';
import Footer from './Components/components/Footer';
import Workshop from './Components/components/Workshop';
import DarkMode from './Components/components/DarkMode';

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
      
      
      
      
      
      
      
      
    
  ,
)

Martin Prikryl · Answer

要实现全局暗黑模式并应用于整个网站，您需要在比仅限于组件更高的层级来管理暗黑模式状态。一种方法是将状态提升至包含整个应用程序的公共父组件中。这样，所有需要关注暗黑模式状态的组件都可以访问到它。

在父组件（例如）中创建一个状态来管理暗黑模式状态。
将该状态以及用于切换暗黑模式的函数作为属性传递给组件。
更新组件以使用传入的状态和函数。

App.jsx

import React, { useState } from 'react';
import Navbar from './Components/components/Navbar';
import Hero from './Components/components/Hero';
import About from './Components/components/About';
import Feature from './Components/components/Feature';
import Card from './Components/components/Card';
import Opensource from './Components/components/Opensource';
import Footer from './Components/components/Footer';
import Workshop from './Components/components/Workshop';
import DarkMode from './Components/components/DarkMode';

function App() {
  const [toggleDarkMode, setToggleDarkMode] = useState(true);

  const toggleDarkTheme = () => {
    setToggleDarkMode(!toggleDarkMode);
  };

  return (
    
      
      
      
      
      
      
      
      
      
    
  );
}

export default App;

DarkMode.jsx

import React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { Switch } from '@mui/material';

export default function DarkMode({ toggleDarkMode, toggleDarkTheme }) {
  const darkTheme = createTheme({
    palette: {
      mode: toggleDarkMode ? 'dark' : 'light',
      primary: {
        main: '#90caf9',
      },
      secondary: {
        main: '#131052',
      },
    },
  });

  return (
    
      
      
        切换暗黑模式
        
      
    
  );
}

现在，暗黑模式状态已经在组件中进行管理，而且和组件都具有对该状态的访问权限。这样一来，当您在组件中切换暗黑模式时，整个应用程序都会受到影响。

Lukas Eder · Answer

DarkMode 组件维护了主题状态并渲染了 ThemeProvider 组件以提供上下文环境，但之后却没有渲染任何可以消费该提供的上下文值的子级 React 组件树。

请更新 DarkMode 组件以渲染其 children 属性，并将需要消费主题上下文的所有 UI 组件包裹起来。

export default function DarkMode({ children }) {
  // 状态管理：暗黑模式
  const [toggleDarkMode, setToggleDarkMode] = useState(true);

  // 切换暗黑模式的函数
  const toggleDarkTheme = () => {
    setToggleDarkMode(!toggleDarkMode);
  };

  // 应用主色和副色主题配置
  const darkTheme = createTheme({
    palette: {
      mode: toggleDarkMode ? 'dark' : 'light', // 根据切换状态处理暗黑模式
      primary: {
        main: '#90caf9',
      },
      secondary: {
        main: '#131052',
      },
    },
  });

  return (
    
      
      
        切换暗黑模式
        
      
      {children} {/* 将子组件放在 Provider 下面进行渲染 */}
    
  );
}

ReactDOM.createRoot(document.getElementById('root'))
  .render(
    
       {/* 提供主题上下文 */}
        {/* 所有子组件都将消费主题上下文 */}
        
        
        
        
        
        
        
        
      
    ,
  );