Styled-components 不输出样式标签

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"))

styled-components在HTML页面上输出的代码看起来不错，但是头部的<style>没有被添加，导致没有css样式完全没有。

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

有人有什么建议吗？

Answer 1

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

样式化组件插入空样式标签来托管这些动态注入的样式。