ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-30 04:59:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

lib: add and config mui

Browse Source
This commit is contained in:
rusconn
2022-04-01 09:14:07 +09:00
parent d1e5c9e7f6
commit 127c359b5f
7 changed files with 602 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/data/emotion.ts Normal file
View File

@@ -0,0 +1,3 @@
import createCache from "@emotion/cache";
export const cache = createCache({ key: "css", prepend: true });

2
src/data/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * as emotion from "./emotion";
export * as mui from "./mui";

3
src/data/mui.ts Normal file
View File

@@ -0,0 +1,3 @@
import { createTheme } from "@mui/material";
export const theme = createTheme();

26
src/pages/_app.tsx
View File

@@ -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) => <Component {...pageProps} />;
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) => (
<CacheProvider value={emotionCache}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={mui.theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
export default MyApp;

48
src/pages/_document.tsx
View File

@@ -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 (
<Html lang="en">
<Head />
<Head>
<meta name="theme-color" content={mui.theme.palette.primary.main} />
<link rel="shortcut icon" href="/favicon.ico" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
{/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any */}
{(this.props as any).emotionStyleTags}
</Head>
<body>
<Main />
<NextScript />
@@ -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 <App emotionCache={cache} {...props} />;
},
});
const initialProps = await Document.getInitialProps(ctx);
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map(style => (
<style
data-emotion={`${style.key} ${style.ids.join(" ")}`}
key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));
return {
...initialProps,
emotionStyleTags,
};
};
export default MyDocument;