如何在Styled Components中使用Ant Design v5主题设计令牌

不需要手动复制所有Antd设计令牌，你可以通过Antd官方提供的工具快速将其注入到Styled Components的主题系统中，具体有两种常用方式：

方式一：通过useToken钩子动态获取（推荐，支持动态主题切换） #

利用Antd的useToken钩子获取当前主题的所有设计令牌，再和你自定义的baseTheme合并后传给Styled Components的ThemeProvider：

1. 导入所需模块

import { ConfigProvider, useToken } from 'antd';
import { ThemeProvider } from 'styled-components';

2. 封装主题合并组件

const StyledThemeWrapper = ({ children, baseTheme }) => {
  // 获取Antd当前主题的所有令牌
  const { token } = useToken();
  // 合并自定义主题与Antd令牌
  const mergedTheme = { ...baseTheme, antdToken: token };
  return <ThemeProvider theme={mergedTheme}>{children}</ThemeProvider>;
};

3. 应用入口配置

function App() {
  // 你的自定义主题
  const baseTheme = {
    color: {
      primary: '#your-custom-color'
    }
  };

  return (
    {/* 这里可配置Antd自定义主题，比如修改主色调 */}
    <ConfigProvider theme={{ colorPrimary: '#1890ff' }}>
      <StyledThemeWrapper baseTheme={baseTheme}>
        {/* 你的应用内容 */}
      </StyledThemeWrapper>
    </ConfigProvider>
  );
}

4. 在Styled Components中使用

const MyComponent = styled.button`
  // 使用Antd的设计令牌
  color: ${props => props.theme.antdToken.colorPrimary};
  // 使用自定义主题值
  border-color: ${props => props.theme.color.primary};
`;

方式二：静态生成主题令牌（适合无动态主题需求的场景） #

如果不需要动态切换主题，可以用@ant-design/cssinjs的generateTheme方法直接生成Antd主题令牌，再合并到自定义主题：

1. 安装依赖（如果未安装）

npm install @ant-design/cssinjs

2. 生成并合并主题

import { generateTheme } from '@ant-design/cssinjs';
import { defaultAlgorithm } from '@ant-design/colors';
import { ThemeProvider } from 'styled-components';

// 生成Antd默认主题令牌，也可传入自定义配置
const antdToken = generateTheme({}, defaultAlgorithm);
// 合并自定义主题与Antd令牌
const mergedTheme = {
  color: {
    primary: '#your-custom-color'
  },
  antdToken
};

// 在入口传入ThemeProvider
function App() {
  return (
    <ThemeProvider theme={mergedTheme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

这种方式无需依赖Antd的ConfigProvider，但无法支持动态主题切换，适合固定主题的场景。

内容的提问来源于stack exchange，提问作者ong troi oi