如何在React子组件中获取Ant Design主题所使用的算法？

方法1：使用useToken Hook #

Ant Design 内置的useToken Hook可以直接获取当前生效的主题配置，包含你需要的算法信息。在子组件中调用即可：

import { useToken } from 'antd';
import theme from 'antd/es/theme';

const Header = () => {
  const { theme: currentTheme } = useToken();
  const currentAlgorithm = currentTheme.algorithm;

  // 示例：判断是否为深色模式
  const isDark = currentAlgorithm === theme.darkAlgorithm;

  return (
    <header style={{ backgroundColor: isDark ? '#1a1a1a' : '#ffffff' }}>
      {/* 组件内容 */}
    </header>
  );
};

方法2：直接读取ConfigProvider上下文 #

如果需要更底层的上下文访问，可以直接使用Ant Design暴露的ConfigProviderContext：

import { ConfigProviderContext } from 'antd/es/config-provider';
import { useContext } from 'react';
import theme from 'antd/es/theme';

const Header = () => {
  const configCtx = useContext(ConfigProviderContext);
  const currentAlgorithm = configCtx?.theme?.algorithm;

  // 后续逻辑处理
  return <header>...</header>;
};

关键说明 #

• 嵌套的ConfigProvider会优先使用最内层的配置，所以上述方法拿到的是最终生效的算法（比如你代码中内层的darkAlgorithm）
• useToken Hook要求Ant Design版本在v4.17.0及以上，如果你的版本较低，建议升级或使用上下文方式

内容的提问来源于stack exchange，提问作者Mahdi Haeri