[英]How to integrate Nextjs + styled-components with material-ui
1.使用樣式化組件構建 next.js 應用程序非常簡單。 你只需要使用他們的_document.js
片段來啟用 SSR 並防止頁面加載時的樣式閃爍: https : //github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document .js
2.使用 material-ui 構建 next.js 應用程序幾乎同樣簡單。 你只需_document.js
項目庫開始: https : //github.com/mui-org/material-ui/tree/master/examples/nextjs ,它在_document.js
上有自己的實現: https://github。 com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
3.遺憾的是,我無法弄清楚如何“合並”這兩個實現並獲得下一個應用程序,其中樣式組件和材料 ui 組件可以共存,SSR 並且不會在頁面加載時閃爍。
你能幫助我嗎? 互聯網上有沒有比我能力強的人已經解決了這個問題但我不知道?
提前致謝。
試試這個
_document.js
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components'
import { ServerStyleSheets } from '@material-ui/styles';
import theme from '../src/theme';
class MyDocument extends Document {
static async getInitialProps (ctx) {
const styledComponentsSheet = new ServerStyleSheet()
const materialSheets = new ServerStyleSheets()
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () => originalRenderPage({
enhanceApp: App => props => styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />))
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<React.Fragment>
{initialProps.styles}
{materialSheets.getStyleElement()}
{styledComponentsSheet.getStyleElement()}
</React.Fragment>
)
}
} finally {
styledComponentsSheet.seal()
}
}
render() {
return (
<html lang="en" dir="ltr">
<Head>
<meta charSet="utf-8" />
{/* Use minimum-scale=1 to enable GPU rasterization */}
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
{/* PWA primary color */}
<meta
name="theme-color"
content={theme.palette.primary.main}
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
export default MyDocument;
.babelrc
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
更新檢查https://github.com/nblthree/nextjs-with-material-ui-and-styled-components
此解決方案適用於服務器端,對於客戶端,您還需要更改注入順序,如此處所述: https : //material-ui.com/customization/css-in-js/#css-injection-order
為了使 next.js 可以工作,您需要像這樣更改 jss 常量的分配:
const jss = create({
...jssPreset(),
insertionPoint: process.browser
? window.document.getElementById('jss-insertion-point')
: null
})
這是我的_document.js
文件如下所示:
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
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();
}
}
}
在下面找到我的.babelrc
文件:
{
"presets": ["next/babel"],
"plugins": [
["styled-components", { "ssr": true }]
]
}
對於仍然有上述代碼問題的每個人:我還必須在 pages/_app.tsx 中包含 StylesProvider。
_app.tsx:
import { StylesProvider } from '@material-ui/core/styles';
<StylesProvider injectFirst>
{/* Your component tree.
Now, you can override Material-UI's styles. */}
</StylesProvider>
_document.tsx:
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/styles';
import { ServerStyleSheet } from 'styled-components';
class MyDocument extends Document {
render() {
return (
<html lang="en">
<Head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
{/* Fonts and icons */}
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
/>
<link
href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
rel="stylesheet"
/>
</Head>
<body>
<div id="page-transition" />
<Main />
<NextScript />
</body>
</html>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
// Render app and page and get the context of the page with collected side effects.
const materialSheet = new ServerStyleSheets();
const styledComponentSheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
styledComponentSheet.collectStyles(
materialSheet.collect(<App {...props} />),
),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
...React.Children.toArray(initialProps.styles),
materialSheet.getStyleElement(),
styledComponentSheet.getStyleElement(),
],
};
} finally {
styledComponentSheet.seal();
}
};
export default MyDocument;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.