docs: fix prev next footer (#41846)

.dumi/theme/SiteThemeProvider.tsx

@@ -0,0 +1,35 @@
+import type { FC, PropsWithChildren } from 'react';
+import React, { useContext } from 'react';
+import { ConfigContext } from 'antd/es/config-provider';
+import { ThemeProvider } from 'antd-style';
+import { theme } from 'antd';
+
+const SiteThemeProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext);
+  const rootPrefixCls = getPrefixCls();
+  const { token } = theme.useToken();
+
+  return (
+    <ThemeProvider
+      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`,
+      }}
+    >
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default SiteThemeProvider;

.dumi/theme/common/Link.tsx

@@ -5,10 +5,11 @@ import { useNavigate } from 'dumi';
 export type LinkProps = {
   to?: string;
   children?: React.ReactNode;
+  className?: string;
 };
 
 const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { to, children } = props;
+  const { to, children, ...rest } = props;
   const navigate = useNavigate();
 
   const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
@@ -21,7 +22,7 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
   };
 
   return (
-    <a ref={ref} href={to} onClick={handleClick}>
+    <a ref={ref} href={to} onClick={handleClick} {...rest}>
       {children}
     </a>
   );

.dumi/theme/common/PrevAndNext.tsx

@@ -1,15 +1,13 @@
 import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
-import { ClassNames, css } from '@emotion/react';
 import type { MenuProps } from 'antd';
 import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { createStyles, css } from 'antd-style';
+import classNames from 'classnames';
 import useMenu from '../../hooks/useMenu';
-import useSiteToken from '../../hooks/useSiteToken';
-
-const useStyle = () => {
-  const { token } = useSiteToken();
 
+const useStyle = createStyles(({ token }) => {
   const { colorSplit, iconCls, fontSizeIcon } = token;
 
   return {
@@ -22,7 +20,7 @@ const useStyle = () => {
       border-top: 1px solid ${colorSplit};
       display: flex;
     `,
-    pageNav: `
+    pageNav: css`
       flex: 1;
       height: 72px;
       line-height: 72px;
@@ -37,7 +35,7 @@ const useStyle = () => {
         margin-inline-start: 4px;
       }
     `,
-    prevNav: `
+    prevNav: css`
       text-align: start;
 
       .footer-nav-icon-after {
@@ -57,7 +55,7 @@ const useStyle = () => {
         right: 0.2em;
       }
     `,
-    nextNav: `
+    nextNav: css`
       text-align: end;
 
       .footer-nav-icon-before {
@@ -79,7 +77,7 @@ const useStyle = () => {
       }
     `,
   };
-};
+});
 
 const flattenMenu = (menuItems: MenuProps['items']): MenuProps['items'] | null => {
   if (Array.isArray(menuItems)) {
@@ -97,7 +95,7 @@ const flattenMenu = (menuItems: MenuProps['items']): MenuProps['items'] | null =
 };
 
 const PrevAndNext: React.FC = () => {
-  const styles = useStyle();
+  const { styles } = useStyle();
 
   const [menuItems, selectedKey] = useMenu({
     before: <LeftOutlined className="footer-nav-icon-before" />,
@@ -122,21 +120,15 @@ const PrevAndNext: React.FC = () => {
   }, [menuItems, selectedKey]);
 
   return (
-    <section css={styles.prevNextNav}>
-      <ClassNames>
-        {({ css: classCss, cx }) => (
-          <>
+    <section className={styles.prevNextNav}>
       {prev &&
         React.cloneElement(prev.label as ReactElement, {
-                className: cx(classCss(styles.pageNav), classCss(styles.prevNav)),
+          className: classNames(styles.pageNav, styles.prevNav),
         })}
       {next &&
         React.cloneElement(next.label as ReactElement, {
-                className: cx(classCss(styles.pageNav), classCss(styles.nextNav)),
+          className: classNames(styles.pageNav, styles.nextNav),
         })}
-          </>
-        )}
-      </ClassNames>
     </section>
   );
 };

.dumi/theme/layouts/GlobalLayout.tsx

@@ -9,6 +9,7 @@ import { App, ConfigProvider, theme as antdTheme } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
 import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
 import React, { useCallback, useEffect, useMemo } from 'react';
+import SiteThemeProvider from '../SiteThemeProvider';
 import useLocation from '../../hooks/useLocation';
 import type { ThemeName } from '../common/ThemeSwitch';
 import ThemeSwitch from '../common/ThemeSwitch';
@@ -117,6 +118,7 @@ const GlobalLayout: React.FC = () => {
             algorithm: getAlgorithm(theme),
           }}
         >
+          <SiteThemeProvider>
             <App>
               {outlet}
               {!pathname.startsWith('/~demos') && (
@@ -126,6 +128,7 @@ const GlobalLayout: React.FC = () => {
                 />
               )}
             </App>
+          </SiteThemeProvider>
         </ConfigProvider>
       </SiteContext.Provider>
     </StyleProvider>