样式化组件不输出样式标记

Question

>我已经使用 Webpack 在 React 中建立了一个新项目，并想尝试一下样式化组件。

我的索引.js如下所示：

import React from "react"
import ReactDOM from "react-dom"
import Page from "./site/Page"
import styled from 'styled-components'

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;

const Index = props => {
return (
<Page>
<Wrapper>
<Title>Test</Title>
</Wrapper>
</Page>);
};
ReactDOM.render(<Index/>, document.getElementById("app"))

HTML 页面上样式化组件输出的代码看起来不错，但头部<style>没有添加，导致根本没有css 样式。

<section class="sc-bwzfXH gzMTbA">
<h1 class="sc-bdVaJa bzmvhR">Test</h1>
</section>

有人有什么建议吗？

Answer 1

看看这个API：CSSStyleSheet.insertRule()。

样式化组件插入空样式标记，用于承载这些动态注入的样式。