mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 15:19:58 +08:00
12efe328ac
* docs: sticky header * docs: adjust floatbutton zindex * chore: code clean
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import type { ThemeProviderProps } from 'antd-style';
|
|
import { ThemeProvider } from 'antd-style';
|
|
import type { FC } from 'react';
|
|
import React, { useContext } from 'react';
|
|
import { ConfigProvider, theme as antdTheme } from 'antd';
|
|
|
|
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);
|
|
const rootPrefixCls = getPrefixCls();
|
|
const { token } = antdTheme.useToken();
|
|
|
|
React.useEffect(() => {
|
|
ConfigProvider.config({
|
|
theme,
|
|
});
|
|
}, [theme]);
|
|
|
|
return (
|
|
<ThemeProvider<NewToken>
|
|
{...rest}
|
|
theme={theme}
|
|
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,
|
|
}}
|
|
>
|
|
{children}
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default SiteThemeProvider;
|