styled-components 是什么笙隙?
styled-components 是一個(gè)常用的 css in js 類庫(kù)石景。和所有同類型的類庫(kù)一樣捐康,通過(guò) js 賦能解決了原生 css 所不具備的能力贞滨,比如變量入热、循環(huán)、函數(shù)等晓铆。
相對(duì)于其他預(yù)處理有什么優(yōu)點(diǎn)勺良?
諸如 sass&less 等預(yù)處理可以解決部分 css 的局限性,但還是要學(xué)習(xí)新的語(yǔ)法尤蒿,而且需要對(duì)其編譯郑气,其復(fù)雜的 webpack 配置也總是讓開發(fā)者抵觸。
如果有過(guò)sass&less的經(jīng)驗(yàn)腰池,也能很快的切換到styled-components尾组,因?yàn)榇蟛糠终Z(yǔ)法都類似忙芒,比如嵌套,& 繼承等讳侨, styled-componens 很好的解決了學(xué)習(xí)成本與開發(fā)環(huán)境問(wèn)題呵萨,很適合 React 技術(shù)棧 && React Native 的項(xiàng)目開發(fā)。
解決了什么問(wèn)題跨跨?
className 的寫法會(huì)讓原本寫css的寫法十分難以接受
如果通過(guò)導(dǎo)入css的方式 會(huì)導(dǎo)致變量泄露成為全局 需要配置webpack讓其模塊化
以及上面提到的解決了原生 css 所不具備的能力潮峦,能夠加速項(xiàng)目的快速開發(fā)
源地址文章:https://www.styled-components.com/docs
注意:styled-components解決全局樣式'injectGlobal' 廢除的問(wèn)題
具體解決方式:
1. 用createGlobalStyle定義全局樣式
2.作為組建的形式展示出樣式
3.想引用全局的默認(rèn)樣式可以查找百度的reset.css段css樣式粘貼即可