如何给 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>
);