样式组件不输出样式标签

Question

I've set up a new project in React using Webpack, and wanted to give a try to Styled Components.

My index.js looks like this:

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

The code outputted by styled-components on the HTML page looks fine but the <style> the on the head doesn't get added, resulting in no css style at all.

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

Does somebody have any suggestions?

Answer 1

Take a look at this API: CSSStyleSheet.insertRule() .

Styled Components inserts empty style tags for hosting these dynamically injected styles.