<style global jsx /> 似乎没有应用
Posted
技术标签:
【中文标题】<style global jsx /> 似乎没有应用【英文标题】：<style global jsx /> doesn't seem to be applied 【发布时间】：2019-12-03 23:00:34 【问题描述】：我有自定义的_document 文件，其内容如下。由于某些原因，<style global jsx /> 中指定的样式似乎并未应用于第一次渲染。在开发中，当我刷新页面时它们会被应用，但是当我为静态导出构建网站时，即使刷新后它们也不会应用。
import ServerStyleSheets from '@material-ui/styles';
import Document, Head, Main, NextScript from 'next/document';
import React, Fragment from 'react';
class MyDocument extends Document
static async getInitialProps(ctx)
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>
initialProps.styles
sheets.getStyleElement()
</Fragment>
)
;
render()
return (
<html lang="en">
<Head>
<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap"
rel="stylesheet"
/>
<style global jsx>`
html
font-size: 16px;
a
text-decoration: none;
#__next
position: relative;
display: flex;
#__next-prerender-indicator
display: none;
`</style>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
export default MyDocument;
【问题讨论】：
我认为是<style jsx global> 标签而不是<style global jsx>。
似乎不是问题，位置改变的行为相同
检查这个 - github.com/zeit/next.js/wiki/Global-styles-and-layouts
还有这个 - github.com/zeit/styled-jsx#global-styles
【参考方案1】：
您应该将全局样式添加到_app。至于为什么它在_document 中不起作用，请查看https://github.com/zeit/styled-jsx#server-side-rendering
我不确定它是否会起作用，但你可以做
import Document, Html, Head, Main, NextScript from 'next/document';
import flush from 'styled-jsx/server';
class MyDocument extends Document
static async getInitialProps (ctx)
const initialProps = await Document.getInitialProps(ctx)
initialProps.styles = flush()
return ...initialProps
render()
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap"
rel="stylesheet"
/>
<style global jsx>`
html
font-size: 16px;
a
text-decoration: none;
#__next
position: relative;
display: flex;
#__next-prerender-indicator
display: none;
`</style>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
export default MyDocument;
【讨论】：
您应该将全局样式添加到 _app - 这是正确的答案！谢谢@evgeni fotia！以上是关于<style global jsx /> 似乎没有应用的主要内容，如果未能解决你的问题，请参考以下文章