From 127c359b5fe9ffdb8945c81ecab8beb0a1416b15 Mon Sep 17 00:00:00 2001 From: rusconn Date: Fri, 1 Apr 2022 09:14:07 +0900 Subject: [PATCH] lib: add and config mui --- package.json | 7 + src/data/emotion.ts | 3 + src/data/index.ts | 2 + src/data/mui.ts | 3 + src/pages/_app.tsx | 26 +- src/pages/_document.tsx | 48 +++- yarn.lock | 528 +++++++++++++++++++++++++++++++++++++++- 7 files changed, 602 insertions(+), 15 deletions(-) create mode 100644 src/data/emotion.ts create mode 100644 src/data/index.ts create mode 100644 src/data/mui.ts diff --git a/package.json b/package.json index 04738a0..91604fe 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,13 @@ "format": "prettier --write './**/*.{js,jsx,ts,tsx,json,css}'" }, "dependencies": { + "@emotion/cache": "^11.7.1", + "@emotion/react": "^11.8.2", + "@emotion/server": "^11.4.0", + "@emotion/styled": "^11.8.1", + "@fontsource/roboto": "^4.5.3", + "@mui/icons-material": "^5.5.1", + "@mui/material": "^5.5.1", "next": "12.1.0", "react": "17.0.2", "react-dom": "17.0.2" diff --git a/src/data/emotion.ts b/src/data/emotion.ts new file mode 100644 index 0000000..57bb49c --- /dev/null +++ b/src/data/emotion.ts @@ -0,0 +1,3 @@ +import createCache from "@emotion/cache"; + +export const cache = createCache({ key: "css", prepend: true }); diff --git a/src/data/index.ts b/src/data/index.ts new file mode 100644 index 0000000..c1cc2b4 --- /dev/null +++ b/src/data/index.ts @@ -0,0 +1,2 @@ +export * as emotion from "./emotion"; +export * as mui from "./mui"; diff --git a/src/data/mui.ts b/src/data/mui.ts new file mode 100644 index 0000000..8814d96 --- /dev/null +++ b/src/data/mui.ts @@ -0,0 +1,3 @@ +import { createTheme } from "@mui/material"; + +export const theme = createTheme(); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 29d3478..5c68987 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,29 @@ +import { CacheProvider, EmotionCache } from "@emotion/react"; +import { CssBaseline, ThemeProvider } from "@mui/material"; import type { AppProps } from "next/app"; +import Head from "next/head"; -const MyApp = ({ Component, pageProps }: AppProps) => ; +import { emotion, mui } from "@/data"; + +import "@fontsource/roboto/300.css"; +import "@fontsource/roboto/400.css"; +import "@fontsource/roboto/500.css"; +import "@fontsource/roboto/700.css"; + +interface MyAppProps extends AppProps { + emotionCache?: EmotionCache; +} + +const MyApp = ({ Component, emotionCache = emotion.cache, pageProps }: MyAppProps) => ( + + + + + + + + + +); export default MyApp; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 5c822b1..4d9fa49 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,5 +1,9 @@ +import createEmotionServer from "@emotion/server/create-instance"; import Document, { DocumentContext, Html, Head, Main, NextScript } from "next/document"; +import { emotion, mui } from "@/data"; +import { cache } from "@/data/emotion"; + const MyDocument = class extends Document { static async getInitialProps(ctx: DocumentContext) { return Document.getInitialProps(ctx); @@ -8,7 +12,17 @@ const MyDocument = class extends Document { render() { return ( - + + + + + + {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any */} + {(this.props as any).emotionStyleTags} +
@@ -18,4 +32,36 @@ const MyDocument = class extends Document { } }; +MyDocument.getInitialProps = async ctx => { + const originalRenderPage = ctx.renderPage; + // eslint-disable-next-line @typescript-eslint/unbound-method + const { extractCriticalToChunks } = createEmotionServer(emotion.cache); + + ctx.renderPage = () => + originalRenderPage({ + // eslint-disable-next-line @typescript-eslint/no-explicit-any + enhanceApp: (App: any) => + function EnhanceApp(props) { + // eslint-disable-next-line react/jsx-props-no-spreading + return ; + }, + }); + + const initialProps = await Document.getInitialProps(ctx); + const emotionStyles = extractCriticalToChunks(initialProps.html); + const emotionStyleTags = emotionStyles.styles.map(style => ( +