ant-design/.dumi/theme/SiteThemeProvider.tsx

65 lines
1.8 KiB
TypeScript
Raw Normal View History

import type { ThemeProviderProps } from 'antd-style';
2023-04-18 15:29:34 +08:00
import { ThemeProvider } from 'antd-style';
import type { FC } from 'react';
import React, { useContext } from 'react';
import { ConfigProvider, theme as antdTheme } from 'antd';
2023-04-18 15:29:34 +08:00
interface NewToken {
headerHeight: number;
menuItemBorder: number;
mobileMaxWidth: number;
siteMarkdownCodeBg: string;
antCls: string;
iconCls: string;
marginFarXS: number;
marginFarSM: number;
marginFar: number;
codeFamily: string;
contentMarginTop: number;
}
// 通过给 antd-style 扩展 CustomToken 对象类型定义,可以为 useTheme 中增加相应的 token 对象
declare module 'antd-style' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface CustomToken extends NewToken {}
}
const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme, ...rest }) => {
const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);
2023-04-18 15:29:34 +08:00
const rootPrefixCls = getPrefixCls();
const { token } = antdTheme.useToken();
React.useEffect(() => {
ConfigProvider.config({
theme,
});
}, [theme]);
2023-04-18 15:29:34 +08:00
return (
<ThemeProvider<NewToken>
{...rest}
theme={theme}
2023-04-18 15:29:34 +08:00
customToken={{
headerHeight: 64,
menuItemBorder: 2,
mobileMaxWidth: 767.99,
siteMarkdownCodeBg: token.colorFillTertiary,
antCls: `.${rootPrefixCls}`,
iconCls: `.${iconPrefixCls}`,
/** 56 */
marginFarXS: (token.marginXXL / 6) * 7,
/** 80 */
marginFarSM: (token.marginXXL / 3) * 5,
/** 96 */
marginFar: token.marginXXL * 2,
codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
contentMarginTop: 40,
2023-04-18 15:29:34 +08:00
}}
>
{children}
</ThemeProvider>
);
};
export default SiteThemeProvider;