From 1847fd6e24b15dc288e4b43ce14861409d5d026d Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 16 Jul 2023 23:43:48 +0800
Subject: [PATCH] site: improve docs use-with-next (#43590)
---
docs/react/use-with-next.en-US.md | 90 ++++++++++++-------------------
docs/react/use-with-next.zh-CN.md | 90 ++++++++++++-------------------
2 files changed, 70 insertions(+), 110 deletions(-)
diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md
index 1714c33e29..d2b7935fd3 100644
--- a/docs/react/use-with-next.en-US.md
+++ b/docs/react/use-with-next.en-US.md
@@ -62,27 +62,28 @@ If you are using the App Router in Next.js and using antd as your component libr
```tsx
'use client';
-import React from 'react';
-import { useServerInsertedHTML } from 'next/navigation';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
+import { useServerInsertedHTML } from 'next/navigation';
+import React from 'react';
-export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
+const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
const cache = createCache();
-
useServerInsertedHTML(() => (
-
+
));
-
return {children};
-}
+};
+
+export default StyledComponentsRegistry;
```
3. Use it in `app/layout.tsx`
```tsx
+import { Inter } from 'next/font/google';
+import React from 'react';
import StyledComponentsRegistry from '../lib/AntdRegistry';
import './globals.css';
-import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
@@ -91,48 +92,31 @@ export const metadata = {
description: 'Generated by create next app',
};
-export default function RootLayout({ children }: { children: React.ReactNode }) {
- return (
-
-
- {children}
-
-
- );
-}
+const RootLayout = ({ children }: { children: React.ReactNode }) => (
+
+
+ {children}
+
+
+);
+
+export default RootLayout;
```
-4. Customize theme in `theme/*.tsx`
+4. Customize theme config in `theme/*.ts`
-```tsx
-'use client';
+```ts
+// theme/themeConfig.ts
+import type { ThemeConfig } from 'antd';
-// theme/index.tsx
-import React from 'react';
-import { ConfigProvider } from 'antd';
-
-const withTheme = (node: JSX.Element) => (
-
- {/* nesting */}
-
- {node}
-
-
-);
+const theme: ThemeConfig = {
+ token: {
+ fontSize: 16,
+ colorPrimary: '#52c41a',
+ },
+};
-export default withTheme;
+export default theme;
```
5. Use in page
@@ -140,21 +124,17 @@ export default withTheme;
```tsx
'use client';
+import { Button, ConfigProvider } from 'antd';
import React from 'react';
-import { Button } from 'antd';
-import withTheme from '../../theme';
+import theme from './themeConfig';
-const Home = function Home() {
- return (
+const HomePage: React.FC = () => (
+
- );
-};
-
-const HomePage = () => {
- return withTheme();
-};
+
+);
export default HomePage;
```
diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md
index 6eaa0fbbe5..fd2e79ef0f 100644
--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@@ -62,27 +62,28 @@ export default Home;
```tsx
'use client';
-import React from 'react';
-import { useServerInsertedHTML } from 'next/navigation';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
+import { useServerInsertedHTML } from 'next/navigation';
+import React from 'react';
-export default function StyledComponentsRegistry({ children }: { children: React.ReactNode }) {
+const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
const cache = createCache();
-
useServerInsertedHTML(() => (
-
+
));
-
return {children};
-}
+};
+
+export default StyledComponentsRegistry;
```
3. 在 `app/layout.tsx` 中使用
```tsx
+import { Inter } from 'next/font/google';
+import React from 'react';
import StyledComponentsRegistry from '../lib/AntdRegistry';
import './globals.css';
-import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
@@ -91,48 +92,31 @@ export const metadata = {
description: 'Generated by create next app',
};
-export default function RootLayout({ children }: { children: React.ReactNode }) {
- return (
-
-
- {children}
-
-
- );
-}
+const RootLayout = ({ children }: { children: React.ReactNode }) => (
+
+
+ {children}
+
+
+);
+
+export default RootLayout;
```
-4. 在 `theme/*.tsx` 中自定义主题
+4. 在 `theme/*.ts` 中自定义主题配置
-```tsx
-'use client';
+```ts
+// theme/themeConfig.ts
+import type { ThemeConfig } from 'antd';
-// theme/index.tsx
-import React from 'react';
-import { ConfigProvider } from 'antd';
-
-const withTheme = (node: JSX.Element) => (
-
- {/* nesting */}
-
- {node}
-
-
-);
+const theme: ThemeConfig = {
+ token: {
+ fontSize: 16,
+ colorPrimary: '#52c41a',
+ },
+};
-export default withTheme;
+export default theme;
```
5. 在页面中使用
@@ -140,21 +124,17 @@ export default withTheme;
```tsx
'use client';
+import { Button, ConfigProvider } from 'antd';
import React from 'react';
-import { Button } from 'antd';
-import withTheme from '../../theme';
+import theme from './themeConfig';
-const Home = function Home() {
- return (
+const HomePage: React.FC = () => (
+
- );
-};
-
-const HomePage = () => {
- return withTheme();
-};
+
+);
export default HomePage;
```