React Ant Design Pro：不借助Setting Drawer手动切换暗黑模式

完全可以通过状态绑定实现暗黑模式切换，核心是直接控制SettingDrawer依赖的settings状态中的暗黑模式字段，具体步骤如下：

1. 确认settings状态结构 #

你的settings状态需要包含darkMode字段（Ant Design Pro Layout默认用该字段控制暗黑模式），初始值可设为false（亮色模式）：

const [settings, setSetting] = useState({
  // 其他配置项...
  darkMode: false,
});

2. 在导航栏添加Switch组件 #

在导航栏组件中引入Ant Design的Switch，将其checked状态绑定到settings.darkMode，并在onChange事件中更新settings：

import { Switch } from 'antd';

// 导航栏中的Switch部分
<Switch
  checked={settings.darkMode}
  onChange={(checked) => {
    setSetting(prev => ({
      ...prev,
      darkMode: checked,
    }));
  }}
  checkedChildren="暗黑"
  unCheckedChildren="亮色"
/>

3. 验证效果 #

点击Switch时，settings.darkMode会同步更新，由于你已将settings传入SettingDrawer，Pro Layout会自动根据该状态切换全局暗黑/亮色模式，包括SettingDrawer内部的主题显示也会同步变化。

为什么修改CSS无效？ #

Ant Design Pro的暗黑模式是通过全局注入.dark-theme类名+CSS变量实现的整套主题体系，直接修改CSS只能覆盖局部样式，无法触发框架内置的主题切换逻辑（比如全局类名的添加/移除、组件样式的全局更新）。而修改settings状态时，Pro Layout会自动完成这些底层操作，真正启用官方Beta版暗黑模式。

内容的提问来源于stack exchange，提问作者Zura Jeladze