码迷,mamicode.com
首页 > 其他好文 > 详细

styled-components

时间:2017-12-23 23:00:07      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:判断   外部   定义   tiny   条件   写法   long   使用   模式   

参考:

  http://www.alloyteam.com/2017/05/guide-styled-components/  

  https://medium.com/styled-components/getting-sassy-with-sass-styled-theme-9a375cfb78e8

  https://juejin.im/entry/59473d2fda2f6000678468cb

  http://web.jobbole.com/91506/

使用方式主要是 模板字符串 和 标签模板(函数的独特调用形式)。

使用标签模板,会返回一个React组件,可以在定义的时候通过props获取到外部传递进来的数据;

组件生成的元素上会被自动加上一个随机的类名,以达到不冲突的目的。

 

使用这种组件有利于逻辑与样式的分离(分离成逻辑组件和展示组件,展示组件内部使用style-components)

css module是js和css分离的写法

styled-components是在js中写css,这种css in js模式是新一代react组件样式解决方案,可以在js中写条件判断,使用的时候更加简洁和语义化,对比以下两种方式:

<TinyBitLongerStyleName></TinyBitLongerStyleName>
<div className={styles.longerStyleName}></div>

 

styled-components

标签:判断   外部   定义   tiny   条件   写法   long   使用   模式   

原文地址:http://www.cnblogs.com/hellohello/p/8094450.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!