styled-components 簡介

動機

styled-components 是作者對于如何增強 React 組件中 CSS 表現(xiàn)這個問題的思考結(jié)果 通過聚焦于單個用例,設(shè)法優(yōu)化了開發(fā)者的體驗和面向終端用戶的輸出.

除了提升開發(fā)者體驗外, styled-components 同時提供以下特性:

• Automatic critical CSS: styled-components 持續(xù)跟蹤頁面上渲染的組件,并向自動其注入且僅注入樣式. 結(jié)合使用代碼拆分, 可以實現(xiàn)僅加載所需的最少代碼.
• 解決了 class name 沖突: styled-components 為樣式生成唯一的 class name. 開發(fā)者不必再擔心 class name 重復(fù),覆蓋和拼寫錯誤的問題.
• CSS 更容易移除: 想要確切的知道代碼中某個 class 在哪兒用到是很困難的. 使用 styled-components 則很輕松, 因為每個樣式都有其關(guān)聯(lián)的組件. 如果檢測到某個組件未使用并且被刪除,則其所有的樣式也都被刪除.
• 簡單的動態(tài)樣式: 可以很簡單直觀的實現(xiàn)根據(jù)組件的 props 或者全局主題適配樣式,無需手動管理數(shù)十個 classes.
• 無痛維護: 無需搜索不同的文件來查找影響組件的樣式.無論代碼多龐大，維護起來都是小菜一碟。
• 自動提供前綴: 按照當前標準寫 CSS,其余的交給 styled-components handle 處理.

通過 styled-components 綁定樣式到組件,開發(fā)者可以在編寫熟知的 CSS 同時也獲得上述全部的益處.