mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
docs: fix prev and next style missing in ssr (#43158)
This commit is contained in:
parent
5c350a80e2
commit
5f1230b27a
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user