初识
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
