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
Split 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
'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(() => (
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}></style>
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
));
return <StyleProvider cache={cache}>{children}</StyleProvider>;
}
};
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 (
<html lang="en">
<body className={inter.className}>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
);
}
const RootLayout = ({ children }: { children: React.ReactNode }) => (
<html lang="en">
<body className={inter.className}>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
);
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) => (
<ConfigProvider
theme={{
token: {
colorPrimary: '#52c41a',
},
}}
>
{/* nesting */}
<ConfigProvider
theme={{
token: {
borderRadius: 16,
},
}}
>
{node}
</ConfigProvider>
</ConfigProvider>
);
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 = () => (
<ConfigProvider theme={theme}>
<div className="App">
<Button type="primary">Button</Button>
</div>
);
};
const HomePage = () => {
return withTheme(<Home />);
};
</ConfigProvider>
);
export default HomePage;
```

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

@ -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(() => (
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}></style>
<style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
));
return <StyleProvider cache={cache}>{children}</StyleProvider>;
}
};
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 (
<html lang="en">
<body className={inter.className}>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
);
}
const RootLayout = ({ children }: { children: React.ReactNode }) => (
<html lang="en">
<body className={inter.className}>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
);
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) => (
<ConfigProvider
theme={{
token: {
colorPrimary: '#52c41a',
},
}}
>
{/* nesting */}
<ConfigProvider
theme={{
token: {
borderRadius: 16,
},
}}
>
{node}
</ConfigProvider>
</ConfigProvider>
);
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 = () => (
<ConfigProvider theme={theme}>
<div className="App">
<Button type="primary">Button</Button>
</div>
);
};
const HomePage = () => {
return withTheme(<Home />);
};
</ConfigProvider>
);
export default HomePage;
```

Write Preview
Loading…
Cancel
Save