Documents
custom-token-types.zh-CN
custom-token-types.zh-CN
Type
External
Status
Published
Created
Jun 12, 2026
Updated
Jun 12, 2026
Source
View

如何给 antd-style 扩展 CustomToken 对象类型定义?#

解决思路#

通过给 antd-style 扩展 CustomToken 接口的类型定义,可以为 useTheme hooks 中增加相应的 token 类型定义。

同时,给 ThemeProvider 对象添加泛型,可以约束 customToken 的入参定义。

import { ThemeProvider, useTheme } from 'antd-style';

interface NewToken {
  customBrandColor: string;
}

// 通过给 antd-style 扩展 CustomToken 对象类型定义,可以为 useTheme 中增加相应的 token 对象
declare module 'antd-style' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface CustomToken extends NewToken {}
}

const App = () => {
  const token = useTheme();
  return <div>{token.customBrandColor}</div>;
};

export default () => (
  // 给 ThemeProvider 对象添加泛型后可以约束 customToken 接口的入参定义
  <ThemeProvider<NewToken> customToken={{ customBrandColor: '#c956df' }}>
    <App />
  </ThemeProvider>
);

参考代码#

相关讨论#