样式组件不输出样式标记

Question

我使用Webpack在React中设置了一个新项目，并想尝试一下Styled Components。

我的 index.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()。

Styled Components插入空样式标记以托管这些动态注入的样式。