用normalize.css + Next.js渲染情感风格
我试图添加Normalize.css作为全局，并使用情感我的CSS模块。
首先我的.babelrc
{
"presets": [
["env", {
"modules": false,
"useBuiltIns": true
}],
"next/babel"
],
"plugins": [
"syntax-dynamic-import",
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties",
"transform-object-rest-spread",
"es6-promise",
["module-resolver", {
"root": ["./src"],
"alias": {
"styles": "./styles",
"assets": "./assets",
},
"cwd": "babelrc"
}],
["inline-import", { "extensions": [".css"] } ],
["emotion", { "inline": true }]
]
}添加Normalize.css
在我的_document.js中，我添加了规范化
import Document, { Head, Main, NextScript } from 'next/document';
import normalize from 'normalize.css/normalize.css';
import { extractCritical } from 'emotion-server';
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const page = renderPage();
const styles = extractCritical(page.html);
return { ...page, ...styles };
}
constructor(props) {
super(props);
const { __NEXT_DATA__, ids } = props;
if (ids) {
__NEXT_DATA__.ids = ids;
}
}
render() {
return (
<html>
<Head>
<title>SSR</title>
<style jsx global>{normalize}</style>
<style dangerouslySetInnerHTML={{ __html: this.props.css }} />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}与在这里显示相同
用情感添加我的css模块
import React, { Component } from 'react';
import Breadcrumb from 'components/Breadcrumb';
import Link from 'next/link';
import styled, { hydrate, keyframes, css, injectGlobal } from 'react-emotion';
// Adds server generated styles to emotion cache.
// '__NEXT_DATA__.ids' is set in '_document.js'
if (typeof window !== 'undefined') {
hydrate(window.__NEXT_DATA__.ids);
}
const basicStyles = css`
background-color: white;
color: cornflowerblue;
margin: 3rem 0;
padding: 1rem 0.5rem;
`
const Basic = styled.div`
${basicStyles};
`
export default class extends Component {
render() {
return (
<Basic>
<p>Basic style rendered by emotion</p>
</Basic>);
}
}与在这里显示相同
问题
错误: StyleSheet：
insertRule只接受字符串。在不变(/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/lib/stylesheet.js:274:11) at StyleSheet.insertRule，(/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/lib/stylesheet.js:125:7) at /home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/stylesheet-registry.js:88:29 at Array.map (原生) at StyleSheetRegistry.add (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/stylesheet-registry.js:87:27) at JSXStyle.componentWillMount (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/style.js:58:26) at resolve (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2616:12) at ReactDOMServerRenderer.render (/home/riderman/WebstormProjects/tmp )/node_modules/react-dom/cjs/react-dom-server.node.development.js:2746:22) at ReactDOMServerRenderer.read (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19) at renderToStaticMarkup (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)
已添加
检查源代码这里
回答 2
Stack Overflow用户
发布于 2018-01-08 16:31:52
看起来这在Zeit的样式上有一个问题-jsx页面：https://github.com/zeit/styled-jsx/issues/298
根据这个问题，要么是外部样式，要么是需要将css标记添加到模板文本中。
在查看您的代码时，您使用的是css标记，没有看到会导致这种情况的任何外部样式。如果你没有一个明确的答案，我会说，跟进298号问题与泽特。干杯！
编辑
去掉那里的jsx样式，只需将规范化添加到全局模板字符串中：
injectGlobal`
${normalize}
html, body {
padding: 3rem 1rem;
margin: 0;
background: papayawhip;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
}
`;Stack Overflow用户
发布于 2019-08-05 16:44:14
我对此有一个额外的答案，在TypeScript和NextJS 9中效果很好。它还保持您的导入直接基于您的node_modules。
模块的Import raw-loader：
yarn add raw-loader在global.d.ts中，为原始加载程序定义一个挂钩。
declare module '!!raw-loader!*' {
const contents: string;
export = contents;
}在我的_document.tsx中有一个名为Meta的组件( _app.tsx也很好，但是_document确保了_document)，我有这个
import normalizeCss from '!!raw-loader!normalize.css';
const Meta = () => (
<div>
<Global
styles={css`
${normalizeCss}
body {
// ...
}
`}
></Global>
</div>
);
export default Meta;https://stackoverflow.com/questions/48013607
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号