styled-components
阿新 • • 發佈:2017-12-24
them getting .com 條件 邏輯 react 生成 獲取 自動
參考:
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