GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

site: improve docs use-with-next (#43590)

pull/43597/head
lijianan 1 year ago
committed by GitHub
parent
fc83371a00
commit
1847fd6e24
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 110 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 90
      docs/react/use-with-next.en-US.md
  2. 90
      docs/react/use-with-next.zh-CN.md

90
docs/react/use-with-next.en-US.md
View File

@ -62,27 +62,28 @@ If you are using the App Router in Next.js and using antd as your component libr
```tsx ```tsx
'use client'; 'use client';
import React from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; 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(); const cache = createCache();
useServerInsertedHTML(() => ( useServerInsertedHTML(() => (
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}></style> <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
)); ));
return <StyleProvider cache={cache}>{children}</StyleProvider>; return <StyleProvider cache={cache}>{children}</StyleProvider>;
} };
export default StyledComponentsRegistry;
``` ```
3. Use it in `app/layout.tsx` 3. Use it in `app/layout.tsx`
```tsx ```tsx
import { Inter } from 'next/font/google';
import React from 'react';
import StyledComponentsRegistry from '../lib/AntdRegistry'; import StyledComponentsRegistry from '../lib/AntdRegistry';
import './globals.css'; import './globals.css';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] }); const inter = Inter({ subsets: ['latin'] });
@ -91,48 +92,31 @@ export const metadata = {
description: 'Generated by create next app', description: 'Generated by create next app',
}; };
export default function RootLayout({ children }: { children: React.ReactNode }) { const RootLayout = ({ children }: { children: React.ReactNode }) => (
return ( <html lang="en">
<html lang="en"> <body className={inter.className}>
<body className={inter.className}> <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry> </body>
</body> </html>
</html> );
);
} export default RootLayout;
``` ```
4. Customize theme in `theme/*.tsx` 4. Customize theme config in `theme/*.ts`
```tsx ```ts
'use client'; // theme/themeConfig.ts
import type { ThemeConfig } from 'antd';
// theme/index.tsx const theme: ThemeConfig = {
import React from 'react'; token: {
import { ConfigProvider } from 'antd'; fontSize: 16,
colorPrimary: '#52c41a',
const withTheme = (node: JSX.Element) => ( },
<ConfigProvider };
theme={{
token: {
colorPrimary: '#52c41a',
},
}}
>
{/* nesting */}
<ConfigProvider
theme={{
token: {
borderRadius: 16,
},
}}
>
{node}
</ConfigProvider>
</ConfigProvider>
);
export default withTheme; export default theme;
``` ```
5. Use in page 5. Use in page
@ -140,21 +124,17 @@ export default withTheme;
```tsx ```tsx
'use client'; 'use client';
import { Button, ConfigProvider } from 'antd';
import React from 'react'; import React from 'react';
import { Button } from 'antd'; import theme from './themeConfig';
import withTheme from '../../theme';
const Home = function Home() { const HomePage: React.FC = () => (
return ( <ConfigProvider theme={theme}>
<div className="App"> <div className="App">
<Button type="primary">Button</Button> <Button type="primary">Button</Button>
</div> </div>
); </ConfigProvider>
}; );
const HomePage = () => {
return withTheme(<Home />);
};
export default HomePage; export default HomePage;
``` ```

90
docs/react/use-with-next.zh-CN.md
View File

@ -62,27 +62,28 @@ export default Home;
```tsx ```tsx
'use client'; 'use client';
import React from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; 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(); const cache = createCache();
useServerInsertedHTML(() => ( useServerInsertedHTML(() => (
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}></style> <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
)); ));
return <StyleProvider cache={cache}>{children}</StyleProvider>; return <StyleProvider cache={cache}>{children}</StyleProvider>;
} };
export default StyledComponentsRegistry;
``` ```
3. 在 `app/layout.tsx` 中使用 3. 在 `app/layout.tsx` 中使用
```tsx ```tsx
import { Inter } from 'next/font/google';
import React from 'react';
import StyledComponentsRegistry from '../lib/AntdRegistry'; import StyledComponentsRegistry from '../lib/AntdRegistry';
import './globals.css'; import './globals.css';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] }); const inter = Inter({ subsets: ['latin'] });
@ -91,48 +92,31 @@ export const metadata = {
description: 'Generated by create next app', description: 'Generated by create next app',
}; };
export default function RootLayout({ children }: { children: React.ReactNode }) { const RootLayout = ({ children }: { children: React.ReactNode }) => (
return ( <html lang="en">
<html lang="en"> <body className={inter.className}>
<body className={inter.className}> <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry> </body>
</body> </html>
</html> );
);
} export default RootLayout;
``` ```
4. 在 `theme/*.tsx` 中自定义主题 4. 在 `theme/*.ts` 中自定义主题配置
```tsx ```ts
'use client'; // theme/themeConfig.ts
import type { ThemeConfig } from 'antd';
// theme/index.tsx const theme: ThemeConfig = {
import React from 'react'; token: {
import { ConfigProvider } from 'antd'; fontSize: 16,
colorPrimary: '#52c41a',
const withTheme = (node: JSX.Element) => ( },
<ConfigProvider };
theme={{
token: {
colorPrimary: '#52c41a',
},
}}
>
{/* nesting */}
<ConfigProvider
theme={{
token: {
borderRadius: 16,
},
}}
>
{node}
</ConfigProvider>
</ConfigProvider>
);
export default withTheme; export default theme;
``` ```
5. 在页面中使用 5. 在页面中使用
@ -140,21 +124,17 @@ export default withTheme;
```tsx ```tsx
'use client'; 'use client';
import { Button, ConfigProvider } from 'antd';
import React from 'react'; import React from 'react';
import { Button } from 'antd'; import theme from './themeConfig';
import withTheme from '../../theme';
const Home = function Home() { const HomePage: React.FC = () => (
return ( <ConfigProvider theme={theme}>
<div className="App"> <div className="App">
<Button type="primary">Button</Button> <Button type="primary">Button</Button>
</div> </div>
); </ConfigProvider>
}; );
const HomePage = () => {
return withTheme(<Home />);
};
export default HomePage; export default HomePage;
``` ```

Write Preview
Loading…
Cancel
Save