[TOC]
## 支持嵌套
```
格式:
var/let/const 标签名 = styled.标签类型`
//``中就可以像在css文件里一样写css
`
```
![](https://img.kancloud.cn/9b/40/9b40f6d8ac9c9572214b3f8b849a4e1f_852x393.png)
## 支持条件渲染
可以获取到react元素身上的属性作为条件渲染的依据,并使用es6模板字符串的`${}`进行任何js判断与运算。
![](https://img.kancloud.cn/81/6d/816d5f961ade46ff81efbc62ad974cd5_1024x558.png)
## attrs方法
- 允许给标签元素设置默认属性和默认值
- 允许通过标签属性传递值给css作为值
![](https://img.kancloud.cn/21/ae/21ae9c275ccb591fa0edf82ded7c9837_940x405.png)
## 复用样式
一:
```
const Div = styled.div`
color:red;
font-size:36px;
${(props)=>props.big&&`
font-size:72px;
`}
`
const Div2 = styled(Div)`
color:green;
`
```
二:
![](https://img.kancloud.cn/7c/e3/7ce37c301f00a3c49b4309021823d58c_1313x589.png)
## injectGlobal
![](https://img.kancloud.cn/ac/d3/acd38f6f4fac1341d19b76da0b317d25_947x641.png)
## 主题,全局属性
![](https://img.kancloud.cn/24/7f/247f1b24d90bb3029a7bf0f672d28c14_879x747.png)
## 关键帧动画
![](https://img.kancloud.cn/74/b3/74b32d439299499eb061d5b6e5618dea_808x593.png)