styled-components 簡(jiǎn)介

動(dòng)機(jī)

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

除了提升開(kāi)發(fā)者體驗(yàn)外, styled-components 同時(shí)提供以下特性:

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

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