After I build my project, I realized SSR for Material-ui not working on page where I used functional components.
My _document.js:
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components'
import { ServerStyleSheets } from '@material-ui/styles';
import theme from '../lib/themes/hk-theme-light/index';
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="tr">
<Head>
<meta charSet="utf-8" />
<meta
name="theme-color"
content={theme.palette.primary.main}
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Example Page:
import { DynamicTable } from '../../components/Table'
import { Section, DefaultContainer } from '../../components/elements/widgets'
import Layout from '../../layouts/LayoutDefault'
const IhtiyacKredisi = () => {
<Layout>
<Section>
<DefaultContainer maxWidth={false}>
<Grid container spacing={1}>
<Grid item sm={12}>
<H2 variant="title">İhtiyaç Kredisi Maliyet Tablosu ve Örnek Hesaplama</H2>
</Grid>
<DynamicTable
tableData={ratesTable}
description={rateDescription}
/>
</Grid>
</DefaultContainer>
</Section>
</Layout>
}
With this code "jss-server-side" style is empty
If I remove components and I add all functions and imports to page file It works well
I wonder what can cause this problem.
