Nextjs SSG with material-ui bundling all css together #15566
Unanswered
nazmulfahim
asked this question in
Help
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
I use next build and export on an application build with nextjs and material-ui. I am only using Paper component's elevation-10 but While I check the bundle every page bundle with all elevation css's properties. This way all the css like grid-xs10 or xs-8 are getting bundle which is totally unnecessary. If I am using only elevation-10 grid xs-10 how can I make it only bundle the required file. here is the code I am using at _document.js
/* eslint-disable react/jsx-filename-extension */
import { ServerStyleSheets } from "@material-ui/core/styles";
import Document, { Head, Main, NextScript } from "next/document";
import React from "react";
class MyDocument extends Document {
render() {
return (
}
}
MyDocument.getInitialProps = async (ctx) => {
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
<React.Fragment key="styles">
{initialProps.styles}
{sheets.getStyleElement()}
</React.Fragment>,
],
};
};
export default MyDocument;
Beta Was this translation helpful? Give feedback.
All reactions