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

site: update doc example in next.js agin (#43663)

master
lijianan 1 year ago
committed by GitHub
parent
473130fe32
commit
07d3a46e42
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 71 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. 46
      docs/react/use-with-next.en-US.md
  2. 46
      docs/react/use-with-next.zh-CN.md

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

@ -58,8 +58,8 @@ If you are using the Pages Router in Next.js and using antd as your component li
2. Rewrite `pages/_document.tsx`
```tsx
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
const MyDocument = () => (
<Html lang="en">
@ -76,7 +76,8 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => (
enhanceApp: (App) => (props) =>
(
<StyleProvider cache={cache}>
<App {...props} />
</StyleProvider>
@ -103,37 +104,34 @@ export default MyDocument;
3. Supports custom themes
```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
```ts
// theme/themeConfig.ts
import type { ThemeConfig } from 'antd';
const withTheme = (node: JSX.Element) => (
<>
<ConfigProvider
theme={{
const theme: ThemeConfig = {
token: {
fontSize: 16,
colorPrimary: '#52c41a',
},
}}
>
{node}
</ConfigProvider>
</>
);
};
export default withTheme;
export default theme;
```
4. Rewrite `pages/_app.tsx`
```tsx
import '../styles/globals.css';
import { ConfigProvider } from 'antd';
import type { AppProps } from 'next/app';
import withTheme from '../theme';
import theme from './themeConfig';
export default function App({ Component, pageProps }: AppProps) {
return withTheme(<Component {...pageProps} />);
}
const App = ({ Component, pageProps }: AppProps) => (
<ConfigProvider theme={theme}>
<Component {...pageProps} />
</ConfigProvider>
);
export default App;
```
5. Use antd in page component
@ -141,13 +139,13 @@ export default function App({ Component, pageProps }: AppProps) {
```tsx
import { Button } from 'antd';
export default function Home() {
return (
const Home = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
export default Home;
```
For more detailed information, please refer to [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style).

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

@ -60,8 +60,8 @@ export default Home;
2. 改写 `pages/_document.tsx`
```tsx
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
const MyDocument = () => (
<Html lang="en">
@ -78,7 +78,8 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => (
enhanceApp: (App) => (props) =>
(
<StyleProvider cache={cache}>
<App {...props} />
</StyleProvider>
@ -105,37 +106,34 @@ export default MyDocument;
3. 支持自定义主题
```tsx
import React from 'react';
import { ConfigProvider } from 'antd';
```ts
// theme/themeConfig.ts
import type { ThemeConfig } from 'antd';
const withTheme = (node: JSX.Element) => (
<>
<ConfigProvider
theme={{
const theme: ThemeConfig = {
token: {
fontSize: 16,
colorPrimary: '#52c41a',
},
}}
>
{node}
</ConfigProvider>
</>
);
};
export default withTheme;
export default theme;
```
4. 改写 `pages/_app.tsx`
```tsx
import '../styles/globals.css';
import { ConfigProvider } from 'antd';
import type { AppProps } from 'next/app';
import withTheme from '../theme';
import theme from './themeConfig';
export default function App({ Component, pageProps }: AppProps) {
return withTheme(<Component {...pageProps} />);
}
const App = ({ Component, pageProps }: AppProps) => (
<ConfigProvider theme={theme}>
<Component {...pageProps} />
</ConfigProvider>
);
export default App;
```
5. 在页面中使用 antd
@ -143,13 +141,13 @@ export default function App({ Component, pageProps }: AppProps) {
```tsx
import { Button } from 'antd';
export default function Home() {
return (
const Home = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
export default Home;
```
更多详细的细节可以参考 [with-nextjs-inline-style](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)。

Write Preview
Loading…
Cancel
Save