How to integrate Nextjs + styled-components with material-ui
Question
1. To build a next.js app using styled components it's really easy. You just have to use their _document.js snippet to enable SSR and prevent styles flickering on page load: https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js
2. To build a next.js app using material-ui is almost as simple. You just have to start with ther project base: https://github.com/mui-org/material-ui/tree/master/examples/nextjs , which has its own implementation on _document.js : https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
3. Sadly, I couldn't figure out how to "merge" both implementations and get a next app where both styled-components and material-ui components can coexist, SSR and do not flicker on page load.
Can you help me? Is there someone on the internet with better abilities than mine whom already solved that problem but I do not know about?
Thanks in advance.
5 answers
solution1
41 ACCPTED 2019-03-12 18:06:15
Give this a try
_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 }]]
}
For update check https://github.com/nblthree/nextjs-with-material-ui-and-styled-components
solution2
1 2019-04-15 11:58:53
This solution works fine for server-side, for client side you also need to change the injection order, as documented here: https://material-ui.com/customization/css-in-js/#css-injection-order
To make this work with next.js, you need to change the asignation of the jss constant like this:
const jss = create({
...jssPreset(),
insertionPoint: process.browser
? window.document.getElementById('jss-insertion-point')
: null
})
solution3
1 2019-10-20 05:42:22
here is my _document.js file looks like:
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();
}
}
}
and below find my .babelrc file:
{
"presets": ["next/babel"],
"plugins": [
["styled-components", { "ssr": true }]
]
}
solution4
0 2021-04-08 07:27:37
For everyone who still has the problem with the code above: I had to also include the StylesProvider in pages/_app.tsx.
_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;
solution5
0 2021-08-29 17:42:15
I have followed these example approach and worked well for me:
https://github.com/mui-org/material-ui/tree/next/examples/nextjs-with-styled-components-typescript
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.