docs: fix prev and next style missing in ssr (#43158)

This commit is contained in:
afc163 2023-06-24 15:50:33 +08:00 committed by GitHub
parent 5c350a80e2
commit 5f1230b27a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,13 +1,14 @@
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { css } from '@emotion/react';
import type { MenuProps } from 'antd';
import { createStyles, css } from 'antd-style';
import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
import classNames from 'classnames';
import type { ReactElement } from 'react';
import React, { useMemo } from 'react';
import useMenu from '../../hooks/useMenu';
import useSiteToken from '../../hooks/useSiteToken';
const useStyle = createStyles(({ token }) => {
const useStyle = () => {
const { token } = useSiteToken();
const { colorSplit, iconCls, fontSizeIcon } = token;
return {
@ -27,6 +28,7 @@ const useStyle = createStyles(({ token }) => {
text-decoration: none;
${iconCls} {
color: #999;
font-size: ${fontSizeIcon}px;
transition: all 0.3s;
}
@ -40,7 +42,7 @@ const useStyle = createStyles(({ token }) => {
display: flex;
justify-content: flex-start;
align-items: center;
.footer-nav-icon-after {
display: none;
}
@ -63,7 +65,7 @@ const useStyle = createStyles(({ token }) => {
display: flex;
justify-content: flex-end;
align-items: center;
.footer-nav-icon-before {
display: none;
}
@ -83,7 +85,7 @@ const useStyle = createStyles(({ token }) => {
}
`,
};
});
};
const flattenMenu = (menuItems: MenuProps['items']): MenuProps['items'] | null => {
if (Array.isArray(menuItems)) {
@ -101,8 +103,7 @@ const flattenMenu = (menuItems: MenuProps['items']): MenuProps['items'] | null =
};
const PrevAndNext: React.FC<{ rtl?: boolean }> = ({ rtl }) => {
const { styles } = useStyle();
const styles = useStyle();
const beforeProps = { className: 'footer-nav-icon-before' };
const afterProps = { className: 'footer-nav-icon-after' };
@ -129,14 +130,14 @@ const PrevAndNext: React.FC<{ rtl?: boolean }> = ({ rtl }) => {
}, [menuItems, selectedKey]);
return (
<section className={styles.prevNextNav}>
<section css={styles.prevNextNav}>
{prev &&
React.cloneElement(prev.label as ReactElement, {
className: classNames(styles.pageNav, styles.prevNav),
css: [styles.pageNav, styles.prevNav],
})}
{next &&
React.cloneElement(next.label as ReactElement, {
className: classNames(styles.pageNav, styles.nextNav),
css: [styles.pageNav, styles.nextNav],
})}
</section>
);