mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-20 05:12:54 +08:00
fix styled-components FOUC
This commit is contained in:
parent
1cf090805b
commit
b81f9cc281
@ -3,12 +3,38 @@ import Document, {
|
|||||||
Head,
|
Head,
|
||||||
Main,
|
Main,
|
||||||
NextScript,
|
NextScript,
|
||||||
|
DocumentContext,
|
||||||
|
DocumentInitialProps,
|
||||||
} from "next/document";
|
} from "next/document";
|
||||||
import { SeoTags } from "src/components/SeoTags";
|
import { SeoTags } from "src/components/SeoTags";
|
||||||
|
import { ServerStyleSheet } from "styled-components";
|
||||||
|
|
||||||
const isDevelopment = process.env.NODE_ENV === "development";
|
const isDevelopment = process.env.NODE_ENV === "development";
|
||||||
|
|
||||||
class MyDocument extends Document {
|
class MyDocument extends Document {
|
||||||
|
static async getInitialProps(
|
||||||
|
ctx: DocumentContext
|
||||||
|
): Promise<DocumentInitialProps> {
|
||||||
|
const sheet = new ServerStyleSheet();
|
||||||
|
const originalRenderPage = ctx.renderPage;
|
||||||
|
|
||||||
|
try {
|
||||||
|
ctx.renderPage = () =>
|
||||||
|
originalRenderPage({
|
||||||
|
enhanceApp: (App) => (props) =>
|
||||||
|
sheet.collectStyles(<App {...props} />),
|
||||||
|
});
|
||||||
|
|
||||||
|
const initialProps = await Document.getInitialProps(ctx);
|
||||||
|
return {
|
||||||
|
...initialProps,
|
||||||
|
styles: [initialProps.styles, <>{sheet.getStyleElement()}</>],
|
||||||
|
};
|
||||||
|
} finally {
|
||||||
|
sheet.seal();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Html lang="en">
|
<Html lang="en">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user