样式可能会持续50毫秒,然后在此SSR应用程序的以下代码中消失。我很好奇是什么原因造成的。
// This component is a child of index.tsx in the /pages folder
<Button
color="primary"
variant="outlined"
size="large"
>Test Button</Button>
样式消失后,剩下一个普通的HTML按钮。
我相信Next.js是造成这种情况的原因。我检查了Next.js文件,并将next / babel加载程序添加到.babelrc中。除此之外,我还看到了其他相关更改。这是在/pages/_document.js中:
MyDocument.getInitialProps = async ctx => {
const sheets = new MuiServerStyleSheets();
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.Children.toArray(initialProps.styles),sheets.getStyleElement()],};
};
为解决问题所做的事情
- 重新启动服务器
没有更改。
- 强制刷新Chrome 78(CTRL + F5)
没有变化。
理论
我认为服务器端存在问题。客户端和服务器应位于同一台计算机localhost上。这将解释正确的初始结果(客户端初始UI),然后由服务器更新覆盖。
更新1
忘了说我也确实更新了/pages/_app.js
。这是更新的部分:
class MyApp extends App {
componentDidmount() {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles && "parentElement" in jssStyles) {
(jssStyles.parentElement as HTMLElement).removeChild(jssStyles);
}
}