ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[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)