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

Write Preview
Loading…
Cancel
Save