I've used the material ui for about 1 year, and it seems a awesome ui tool.
But I think that I don't understand the mechanism of it.
When I load the initial page, the style tags of material ui is injected as first-order-elements,
but when the page is updated, the style tags of the material ui components in updated page are injected as last-order-elements. (just appended)
like below.
a image file for the initial style tags
a image file for the style tags after the page is updated
Also, some style tags are duplicated with intial style tags, and they seems to break the style rules of other components by breaking the css priority rules.
here's the part my _app.tsx
...
return (
<PersistGate persistor={persistor}> (// redux persist)
<>
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<ThemeProvider theme={theme}> (// styled-component)
<MuiThemeProvider theme={materialTheme}> (// material-ui)
<StylesProvider injectFirst> (// material-ui)
<CssBaseline /> (// material-ui)
<TokenCheckingComponent
checked={tokenChecked}
onTokenCheckDone={(v) => setTokenChecked(v)}
isRedirectCheckDone={isRedirectCheckDone}
setIsRedirectChecked={setIsRedirectChecked}
/>
{
tokenChecked &&
<>
{ !isRedirectCheckDone && <Overlay>Loading...</Overlay>}
<Component {...pageProps}/>
</>
}
</StylesProvider>
</MuiThemeProvider>
</ThemeProvider>
</>
</PersistGate>
);
}
And here's my _document.tsx
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
import { ServerStyleSheet } from 'styled-components';
export default class CustomDocument extends Document {
render() {
return (
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
CustomDocument.getInitialProps = async (ctx) => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render
// Render app and page and get the context of the page with collected side effects.
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()
}
};
framework
"next": "^9.5.3",
other tools
"styled-components": "^5.1.1",
version
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/pickers": "^3.2.10",
babelrc
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-sass"
]
}
}
]
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false }],
[
"module-resolver",
{
"alias": {
"src": "./src"
}
}
]
],
"env": {
"test": {
"presets": [["@babel/preset-env", { "modules": false } ], "next/babel"]
}
}
}
Thank you!
question from:
https://stackoverflow.com/questions/65921424/on-next-js-styled-components-the-material-uis-style-tags-break-its-initial-s 
