**1.**使用样式化组件构建一个next.js应用非常简单。你只需要使用他们的_document.js
片段来启用SSR并防止页面加载时的样式 Flink :https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js
**2.**使用material-ui构建一个next.js应用几乎同样简单。你只需要从项目基础开始:https://github.com/mui-org/material-ui/tree/master/examples/nextjs,它在_document.js
上有自己的实现:https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
**3.**可悲的是,我不知道如何“合并”这两个实现,并得到一个下一个应用程序,其中样式组件和材料UI组件可以共存,SSR和页面加载时不 Flink 。
你能帮我吗?有没有人在互联网上的能力比我更好的人已经解决了这个问题,但我不知道?
先谢谢你了。
5条答案
按热度按时间mdfafbf11#
给予这个
_document.js
**.babelrc
用于更新检查https://github.com/nblthree/nextjs-with-material-ui-and-styled-components
izkcnapc2#
对于仍然有上面代码问题的人:我还必须在pages/_app. tsx中包含StylesProvider。
_app.tsx:
_document.tsx:
1sbrub3j3#
此解决方案适用于服务器端,对于客户端,您还需要更改注入顺序,如下所述:https://material-ui.com/customization/css-in-js/#css-injection-order
要在next.js中实现这一点,需要像这样更改jss常量的赋值:
vfh0ocws4#
下面是我的
_document.js
文件看起来像:在下面找到我的
.babelrc
文件:csbfibhn5#
我已经遵循了这些示例方法,并为我工作得很好:
https://github.com/mui-org/material-ui/tree/next/examples/nextjs-with-styled-components-typescript