初识

styled-components是一个基于JavaScript来改变组织CSS代码的方案。
那么，如何使用styled-components。

import React from 'react';
import styled from 'styled-components';

// 这里的React组件Title是一个被样式过的h1标签。
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 这里的React组件Wrapper是一个被样式过的section标签。
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

export default () => { 
  return (
    <Wrapper>
      <Title>Hello World</Title>
    </Wrapper>
  );
}

生成的源码如下：

<style>
.gzMTbA {
    padding: 4em;
    background: papayawhip;
}
.bzmvhR {
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
}
</style>   
<section class="sc-bwzfXH gzMTbA">
    <h1 class="sc-bdVaJa bzmvhR">Hello World</h1>
</section>

demo地址：https://www.webpackbin.com/bins/-KhMFKbfbzvEo6Hd7n_1

样式复用

原生CSS复用方案

• 通过class层叠来组合样式
• 通过选择器优先级来覆盖

styled-components方案

再包装一层

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background: white;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

export default () => {
  return (
    <div>
      <Button>初始按钮</Button>
      <TomatoButton>被覆盖过的按钮</TomatoButton>
    </div>
  );
}

本质还是通过原生CSS复用方案实现。

<div data-reactroot="">
    <button class="sc-bdVaJa fvZRzy">初始按钮</button>
    <button class="sc-bwzfXH hZIYbe sc-bdVaJa fvZRzy">被覆盖过的按钮</button>
</div>

demo地址：https://www.webpackbin.com/bins/-KhV1CMDQssfwEV5KU2U

总结

styled-components巧妙地利用了es6模板字符串和标签模板的特性，自主生成class名称进行样式管理。
对于样式主题管理，动画，和现有的样式方案结合，styled-components都有其对应的方案。
参照其项目地址：https://github.com/styled-components/styled-components