diff --git a/package.json b/package.json index e1ceaa7d..e3466c56 100644 --- a/package.json +++ b/package.json @@ -19,20 +19,22 @@ "format-check": "yarn prettier --c ." }, "dependencies": { + "@ant-design/cssinjs": "^1.17.0", "@ant-design/icons": "^5.1.4", "@apollo/react-hooks": "^3.1.5", "@emotion/core": "^11.0.0", "@emotion/styled": "^11.10.6", "@storybook/jest": "^0.1.0", "@storybook/preview-api": "^7.0.18", + "antd": "^5.9.3", "apollo-cache-inmemory": "^1.3.9", "apollo-client": "^2.4.5", "apollo-link": "^1.2.3", "apollo-link-error": "^1.1.1", "apollo-link-http": "^1.5.5", "apollo-link-ws": "^1.0.10", - "bootstrap": "^5.2.3", "babel-plugin-styled-components": "^2.0.7", + "bootstrap": "^5.2.3", "colors": "^1.4.0", "core-js": "^3.30.1", "crypto-js": "^4.1.1", diff --git a/src/pages/_document.js b/src/pages/_document.js index fb604574..9ea368ac 100644 --- a/src/pages/_document.js +++ b/src/pages/_document.js @@ -5,6 +5,7 @@ import getConfig from 'next/config'; import Document, { Head, Html, Main, NextScript } from 'next/document'; import Script from 'next/script'; +import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs'; // styled-components import { ServerStyleSheet } from 'styled-components'; @@ -14,19 +15,27 @@ class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderpage = ctx.renderPage; + const cache = createCache(); try { ctx.renderPage = () => originalRenderpage({ - enhanceApp: App => props => sheet.collectStyles(), + enhanceApp: App => props => + sheet.collectStyles( + + + + ), }); const initialProps = await Document.getInitialProps(ctx); + const antdStyle = extractStyle(cache, true); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} +