mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
1 line
10 KiB
JavaScript
1 line
10 KiB
JavaScript
(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["d050a2d2"],{d050a2d2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"texts",{enumerable:!0,get:function(){return a;}}),t("0d87afb3");let a=[{value:"\u670D\u52A1\u7AEF\u6E32\u67D3\u6837\u5F0F\u6709\u4E24\u79CD\u65B9\u6848\uFF0C\u5B83\u4EEC\u5404\u6709\u4F18\u7F3A\u70B9\uFF1A",paraId:0},{value:"\u5185\u8054\u6837\u5F0F",paraId:1},{value:"\uFF1A\u5728\u6E32\u67D3\u65F6\u65E0\u9700\u989D\u5916\u8BF7\u6C42\u6837\u5F0F\u6587\u4EF6\uFF0C\u597D\u5904\u662F\u51CF\u5C11\u989D\u5916\u7684\u7F51\u7EDC\u8BF7\u6C42\uFF0C\u7F3A\u70B9\u5219\u662F\u4F1A\u4F7F\u5F97 HTML \u4F53\u79EF\u589E\u5927\uFF0C\u5F71\u54CD\u9996\u5C4F\u6E32\u67D3\u901F\u5EA6\uFF0C\u76F8\u5173\u8BA8\u8BBA\u53C2\u8003\uFF1A",paraId:1},{value:"#39891",paraId:1},{value:"\u6574\u4F53\u5BFC\u51FA",paraId:1},{value:"\uFF1A\u63D0\u524D\u70D8\u7119 antd \u7EC4\u4EF6\u6837\u5F0F\u4E3A css \u6587\u4EF6\uFF0C\u5728\u9875\u9762\u4E2D\u65F6\u5F15\u5165\u3002\u597D\u5904\u662F\u6253\u5F00\u4EFB\u610F\u9875\u9762\u65F6\u5982\u4F20\u7EDF css \u65B9\u6848\u4E00\u6837\u90FD\u4F1A\u590D\u7528\u540C\u4E00\u5957 css \u6587\u4EF6\u4EE5\u547D\u4E2D\u7F13\u5B58\uFF0C\u7F3A\u70B9\u662F\u5982\u679C\u9875\u9762\u4E2D\u5B58\u5728\u591A\u4E3B\u9898\uFF0C\u5219\u9700\u8981\u989D\u5916\u8FDB\u884C\u70D8\u7119",paraId:1},{value:"\u4F7F\u7528 ",paraId:2,tocIndex:0},{value:"@ant-design/cssinjs",paraId:2,tocIndex:0},{value:" \u5C06\u6240\u9700\u6837\u5F0F\u62BD\u79BB\uFF1A",paraId:2,tocIndex:0},{value:"import React from 'react';\nimport { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';\nimport type Entity from '@ant-design/cssinjs/es/Cache';\nimport { renderToString } from 'react-dom/server';\n\nconst App = () => {\n // SSR Render\n const cache = React.useMemo<Entity>(() => createCache(), []);\n const html = renderToString(\n <StyleProvider cache={cache}>\n <MyApp />\n </StyleProvider>,\n );\n\n // Grab style from cache\n const styleText = extractStyle(cache);\n\n // Mix with style\n return `\n <!DOCTYPE html>\n <html>\n <head>\n ${styleText}\n </head>\n <body>\n <div id=\"root\">${html}</div>\n </body>\n </html>\n `;\n};\n\nexport default App;\n",paraId:3,tocIndex:0},{value:"\u5982\u679C\u4F60\u60F3\u8981\u5C06\u6837\u5F0F\u6587\u4EF6\u62BD\u79BB\u5230 css \u6587\u4EF6\u4E2D\uFF0C\u53EF\u4EE5\u5C1D\u8BD5\u4F7F\u7528\u4EE5\u4E0B\u65B9\u6848\uFF1A",paraId:4,tocIndex:1},{value:"\u5B89\u88C5\u4F9D\u8D56",paraId:5,tocIndex:1},{value:"npm install ts-node tslib cross-env --save-dev\n",paraId:6,tocIndex:1},{value:"\u65B0\u589E ",paraId:7,tocIndex:1},{value:"tsconfig.node.json",paraId:7,tocIndex:1},{value:" \u6587\u4EF6",paraId:7,tocIndex:1},{value:'{\n "compilerOptions": {\n "strictNullChecks": true,\n "module": "NodeNext",\n "jsx": "react",\n "esModuleInterop": true\n },\n "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]\n}\n',paraId:8,tocIndex:1},{value:"\u65B0\u589E ",paraId:9,tocIndex:1},{value:"scripts/genAntdCss.tsx",paraId:9,tocIndex:1},{value:" \u6587\u4EF6",paraId:9,tocIndex:1},{value:"// scripts/genAntdCss.tsx\nimport fs from 'fs';\nimport { extractStyle } from '@ant-design/static-style-extract';\n\nconst outputPath = './public/antd.min.css';\n\nconst css = extractStyle();\n\nfs.writeFileSync(outputPath, css);\n",paraId:10,tocIndex:1},{value:"\u82E5\u4F60\u60F3\u4F7F\u7528\u6DF7\u5408\u4E3B\u9898\u6216\u81EA\u5B9A\u4E49\u4E3B\u9898\uFF0C\u53EF\u91C7\u7528\u4EE5\u4E0B\u811A\u672C\uFF1A",paraId:11,tocIndex:1},{value:"import fs from 'fs';\nimport React from 'react';\nimport { extractStyle } from '@ant-design/static-style-extract';\nimport { ConfigProvider } from 'antd';\n\nconst outputPath = './public/antd.min.css';\n\nconst testGreenColor = '#008000';\nconst testRedColor = '#ff0000';\n\nconst css = extractStyle((node) => (\n <>\n <ConfigProvider\n theme={{\n token: {\n colorBgBase: testGreenColor,\n },\n }}\n >\n {node}\n </ConfigProvider>\n <ConfigProvider\n theme={{\n token: {\n colorPrimary: testGreenColor,\n },\n }}\n >\n <ConfigProvider\n theme={{\n token: {\n colorBgBase: testRedColor,\n },\n }}\n >\n {node}\n </ConfigProvider>\n </ConfigProvider>\n </>\n));\n\nfs.writeFileSync(outputPath, css);\n",paraId:12,tocIndex:1},{value:"\u4F60\u53EF\u4EE5\u9009\u62E9\u5728\u542F\u52A8\u5F00\u53D1\u547D\u4EE4\u6216\u7F16\u8BD1\u524D\u6267\u884C\u8FD9\u4E2A\u811A\u672C\uFF0C\u8FD0\u884C\u4E0A\u8FF0\u811A\u672C\u5C06\u4F1A\u5728\u5F53\u524D\u9879\u76EE\u7684\u6307\u5B9A\uFF08\u5982\uFF1A public \u76EE\u5F55\uFF09\u76EE\u5F55\u4E0B\u76F4\u63A5\u751F\u6210\u4E00\u4E2A\u5168\u91CF\u7684 antd.min.css \u6587\u4EF6\u3002",paraId:13,tocIndex:1},{value:"\u4EE5 Next.js \u4E3A\u4F8B\uFF08",paraId:14,tocIndex:1},{value:"\u53C2\u8003\u793A\u4F8B",paraId:14,tocIndex:1},{value:"\uFF09\uFF1A",paraId:14,tocIndex:1},{value:'// package.json\n{\n "scripts": {\n "dev": "next dev",\n "build": "next build",\n "start": "next start",\n "lint": "next lint",\n "predev": "ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx",\n "prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./scripts/genAntdCss.tsx"\n }\n}\n',paraId:15,tocIndex:1},{value:"\u7136\u540E\uFF0C\u4F60\u53EA\u9700\u8981\u5728",paraId:16,tocIndex:1},{value:"pages/_app.tsx",paraId:16,tocIndex:1},{value:"\u6587\u4EF6\u4E2D\u5F15\u5165\u8FD9\u4E2A\u6587\u4EF6\u5373\u53EF\uFF1A",paraId:16,tocIndex:1},{value:"import { StyleProvider } from '@ant-design/cssinjs';\nimport type { AppProps } from 'next/app';\n\nimport '../public/antd.min.css'; // \u6DFB\u52A0\u8FD9\u884C\nimport '../styles/globals.css';\n\nexport default function App({ Component, pageProps }: AppProps) {\n return (\n <StyleProvider hashPriority=\"high\">\n <Component {...pageProps} />\n </StyleProvider>\n );\n}\n",paraId:17,tocIndex:1},{value:"\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86\u81EA\u5B9A\u4E49\u4E3B\u9898\uFF0C\u53EF\u4EE5\u5C1D\u8BD5\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u8FDB\u884C\u70D8\u7119\uFF1A",paraId:18,tocIndex:2},{value:"import { extractStyle } from '@ant-design/static-style-extract';\nimport { ConfigProvider } from 'antd';\n\nconst cssText = extractStyle((node) => (\n <ConfigProvider\n theme={{\n token: {\n colorPrimary: 'red',\n },\n }}\n >\n {node}\n </ConfigProvider>\n));\n",paraId:19,tocIndex:2},{value:"\u5982\u679C\u4F60\u7684\u9879\u76EE\u4E2D\u4F7F\u7528\u4E86\u6DF7\u5408\u4E3B\u9898\uFF0C\u53EF\u4EE5\u5C1D\u8BD5\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u8FDB\u884C\u70D8\u7119\uFF1A",paraId:20,tocIndex:3},{value:"import { extractStyle } from '@ant-design/static-style-extract';\nimport { ConfigProvider } from 'antd';\n\nconst cssText = extractStyle((node) => (\n <>\n <ConfigProvider\n theme={{\n token: {\n colorBgBase: 'green ',\n },\n }}\n >\n {node}\n </ConfigProvider>\n <ConfigProvider\n theme={{\n token: {\n colorPrimary: 'blue',\n },\n }}\n >\n <ConfigProvider\n theme={{\n token: {\n colorBgBase: 'red ',\n },\n }}\n >\n {node}\n </ConfigProvider>\n </ConfigProvider>\n </>\n));\n",paraId:21,tocIndex:3},{value:"\u66F4\u591A",paraId:22,tocIndex:3},{value:"static-style-extract",paraId:22,tocIndex:3},{value:"\u7684\u5B9E\u73B0\u7EC6\u8282\u8BF7\u770B\uFF1A",paraId:22,tocIndex:3},{value:"static-style-extract",paraId:22,tocIndex:3},{value:"\u3002",paraId:22,tocIndex:3},{value:"// scripts/genAntdCss.tsx\nimport { createHash } from 'crypto';\nimport fs from 'fs';\nimport path from 'path';\nimport { extractStyle } from '@ant-design/cssinjs';\nimport type Entity from '@ant-design/cssinjs/lib/Cache';\n\nexport type DoExtraStyleOptions = {\n cache: Entity;\n dir?: string;\n baseFileName?: string;\n};\nexport function doExtraStyle({\n cache,\n dir = 'antd-output',\n baseFileName = 'antd.min',\n}: DoExtraStyleOptions) {\n const baseDir = path.resolve(__dirname, '../../static/css');\n\n const outputCssPath = path.join(baseDir, dir);\n\n if (!fs.existsSync(outputCssPath)) {\n fs.mkdirSync(outputCssPath, { recursive: true });\n }\n\n const css = extractStyle(cache, true);\n if (!css) return '';\n\n const md5 = createHash('md5');\n const hash = md5.update(css).digest('hex');\n const fileName = `${baseFileName}.${hash.substring(0, 8)}.css`;\n const fullpath = path.join(outputCssPath, fileName);\n\n const res = `_next/static/css/${dir}/${fileName}`;\n\n if (fs.existsSync(fullpath)) return res;\n\n fs.writeFileSync(fullpath, css);\n\n return res;\n}\n",paraId:23,tocIndex:4},{value:"\u5728 ",paraId:24,tocIndex:4},{value:"_document.tsx",paraId:24,tocIndex:4},{value:" \u4E2D\u4F7F\u7528\u4E0A\u8FF0\u5DE5\u5177\u8FDB\u884C\u6309\u9700\u5BFC\u51FA\uFF1A",paraId:24,tocIndex:4},{value:"// _document.tsx\nimport { createCache, StyleProvider } from '@ant-design/cssinjs';\nimport type { DocumentContext } from 'next/document';\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\n\nimport { doExtraStyle } from '../scripts/genAntdCss';\n\nexport default class MyDocument extends Document {\n static async getInitialProps(ctx: DocumentContext) {\n const cache = createCache();\n let fileName = '';\n const originalRenderPage = ctx.renderPage;\n ctx.renderPage = () =>\n originalRenderPage({\n enhanceApp: (App) => (props) => (\n <StyleProvider cache={cache}>\n <App {...props} />\n </StyleProvider>\n ),\n });\n\n const initialProps = await Document.getInitialProps(ctx);\n // 1.1 extract style which had been used\n fileName = doExtraStyle({\n cache,\n });\n return {\n ...initialProps,\n styles: (\n <>\n {initialProps.styles}\n {/* 1.2 inject css */}\n {fileName && <link rel=\"stylesheet\" href={`/${fileName}`} />}\n </>\n ),\n };\n }\n\n render() {\n return (\n <Html lang=\"en\">\n <Head />\n <body>\n <Main />\n <NextScript />\n </body>\n </Html>\n );\n }\n}\n",paraId:25,tocIndex:4},{value:"\u6F14\u793A\u793A\u4F8B\u8BF7\u770B\uFF1A",paraId:26,tocIndex:4},{value:"\u6309\u9700\u62BD\u53D6\u6837\u5F0F\u793A\u4F8B",paraId:26,tocIndex:4}];}}]); |