教你在Vue项目中使用React超火的CSS-in-JS库：styled-components

h1{color:#999;}浠€涔堟槸CSS-in-JS锛烠SS-in-JS椤惧悕鎬濅箟灏辨槸鍙互鐢↗S鍐機SS鏍峰紡锛岄偅涓轰粈涔堣鐢↗S鍐機SS鍛紵鎴慍SS鍐欑殑寰堝ソ锛屼负浠€涔堣璁╄嚜宸遍毦鍙楋紵鐩镐俊澶у閮藉惉杩囪繖鏍蜂竴涓瘝锛氬叧娉ㄧ偣鍒嗙銆傚氨绠椾綘娌″惉杩囪繖涓瘝锛屼綘涔熶竴瀹氬惉杩囪繖鍙ヨ瘽锛欻TML銆丆SS銆丣S鍒嗗紑鍐欙紝涓嶈鍐欏湪涓€璧峰舰鎴愯€﹀悎銆備笉瑕佸儚杩欐牱鍐欏唴鑱旀牱寮忓拰鍐呰仈鑴氭湰绛夝煈?pstyle="line-height:20px"onclick="console.log('styled-components')">CSS-in-JS

浣嗘槸ReactAllinJS鐨勫嚭鐜版墦鐮翠簡杩欎釜鍘熷垯銆侫llinJS鏄叾缁忓吀鐨勫紑鍙戠悊蹇点€傝繖铏界劧杩濊儗浜嗏€滃叧娉ㄧ偣鍒嗙鈥濈殑鍘熷垯锛屼絾鏄湁鍒╀簬缁勪欢涔嬮棿鐨勯殧绂伙紝浣垮畠浠珮搴﹁В鑰︼紝鍙鐜般€傞珮鍙敤鎬с€備负浠€涔圴ue涓緢灏戞湁绫讳技鐨勫簱锛熺浉淇℃湁Vue寮€鍙戠粡楠岀殑閮界煡閬撳啓缁勪欢鏄繖鏍风殑馃憞h1{color:#999;}CSS鐩存帴瀹岀編缁勪欢鍖栵紝涓嶅儚React閭ｆ牱缁勪欢鍜宑ss鏂囦欢鍒嗙銆傝€屾槸鐩存帴闆嗘垚鍦ㄤ竴涓枃浠朵腑锛岄偅浜涜姳閲岃儭鍝ㄧ殑涓滆タ鏍规湰涓嶇敤銆備絾鏄繖鏍峰叾瀹炰篃鏈変竴瀹氱殑缂虹偣锛屾瘮濡侰SS涓嶈兘鎺ュ彈JS鐨勫€拣煈?template>

div{width:100vw;height:100vh;}濡傛灉浣犳兂璁ヾiv鏈変竴涓儗鏅浘鐗囩鐞嗘€庝箞鍔烇紵浣嗚繖绉嶆儏鍐典笅锛岀紪璇戝悗鍙樻垚浜嗗唴宓屽湪div鏍囩涓殑鏍峰紡锛屼笉鍒╀簬缁存姢銆傝繕鏈夊緢澶氭牱寮忓叾瀹炲緢甯歌锛屾瘮濡俧lex馃憞div{鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱justify-content:center;}濡傛灉鍦ㄦ瘡涓粍浠朵腑閮藉啓杩欐牱鐨勬牱寮忥紝涓嶄粎楹荤儲锛岃€屼笖涓嶅埄浜庣淮鎶わ紝鑰屼笖鏈€閲嶈鐨勬槸锛屾瘡涓娇鐢ㄤ簡杩欑鏍峰紡鐨勭粍浠堕兘浼氱敓鎴恉iv[data-v-xxx]鏍峰紡銆備笉璇翠唬鐮佷笂鐨勫法澶у啑浣欙紝杩樹細澶уぇ澧炲姞浣犵殑CSS鏂囦欢鐨勪綋绉紝鍑忔參椤圭洰鐨勮繍琛岄€熷害銆傝繖涔堣仾鏄庯紝浣犲彲鑳戒細鎯筹細鎴戝彲浠ュ畾涔変竴涓叏灞€CSS鏍峰紡锛屽鍚э紵鍦ㄩ渶瑕佺殑鍦版柟娣诲姞鐩稿簲鐨勭被锛屾瘮濡俠ootstrap锛屽湪鐩稿簲鐨勬爣绛句腑娣诲姞绫诲悕銆傛槸鐨勶紝杩欑‘瀹炴槸涓€涓緢濂界殑瑙ｅ喅鏂规锛屼絾鏄綘鏄惁杩樿寰楋紝褰撲綘浣跨敤bootstrap鏃讹紝浣犱笉鍙槸娣诲姞涓€涓被鍚嶏紝浣犺繕闇€瑕佸畨瑁呭畼鏂瑰畾涔夌殑DOM缁撴瀯鏉ョ紪鍐欎綘鐨?template>锛屼粛鐒堕渶瑕佸鍒跺拰绮樿创銆傝€屼笖鏈€閲嶈鐨勬槸娌℃湁鍔炴硶浼犻€掑弬鏁般€傝櫧鐒秄lex鏍峰紡姣旇緝甯哥敤锛屼絾骞朵笉鏄墍鏈夌殑鍦版柟閮介渶瑕佸眳涓紝濡傛灉闇€瑕佸姩鎬佹敼鍙榓lign-items鍜宩ustify-content锛岄偅鍙兘鐢⊿tupid鐨勬柟娉曪細鍐欐墍鏈夊彲鑳界殑鍊肩被銆備篃璁镐綘浼氳锛岄偅鎴戝緱鍐欎釜鍏叡缁勪欢馃憞馃憞馃憞div{display:flex;}浣嗘槸杩欐牱浼氬甫鏉ュ彟澶栦竴涓棶棰橈紝濡傛灉鎴戦渶瑕佷竴涓粍浠舵敼鎴愯繖涓牱寮忔€庝箞鍔烇紵涓嶅氨寰楃敤div鍖呰捣鏉ュ悧锛岄偅浣犲張浼氳锛氳繖杩樹笉绠€鍗曞悧锛熸妸瀹冨啓鎴愪竴涓姩鎬佺粍浠惰繕涓嶅鍚楋紵div{display:flex;}濡傛灉鎴戦渶瑕佷竴鍫嗙粍浠跺叡浜竴涓牱寮忔€庝箞鍔烇紵姣斿Element-UI杩欑宓屽鐨勫啓娉曪紝鑰屼笉鏄叏灞€CSS杩欑搴曞眰鐨勫啓娉曪紝浣犲彲鑳戒細鎷嶆媿鑳歌劘锛氭病闂锛屾垜缁欎綘鎵撳寘涓€涓煈?/Root.vue//Child1.vue//Child2.vue鍙渶浣跨敤杩欎釜锛?/App.vue濡傛灉瑙夊緱杩欎釜棰滆壊鐪嬩笉娓呮锛屽彧闇€灏哛oot缁勪欢涓璸rovide涓殑color:'yellow'鏀逛负color:'gray'锛岀劧鍚庡埛鏂伴〉闈㈠嵆鍙疄鐜扮湡姝ｆ剰涔変笂鐨勭粍浠堕棿鏍峰紡鍏变韩锛佷絾鏄綘涓嶈寰楅夯鐑﹀悧锛熶笉浠呭浜嗕竴灞備笉蹇呰鐨凞OM缁撴瀯锛屽厜鏄牱寮忓鐢ㄥ拰鏍峰紡缁勪欢鍖栧氨璐逛簡閭ｄ箞澶у姛澶紝杩炰竴浜涘熀纭€涓嶆槸寰堟墡瀹炵殑鏈嬪弸鐪嬪埌鈥嬧€嬭繖閲岄兘澶存檿銆備娇鐢ㄦ墦鍖呯殑搴擄紝鎴戜滑鍙槸鍦ㄩ噸鏂板彂鏄庤疆瀛愩€傝繖涓椂鍊欏啀澶氬嚑涓姹傚氨寰堥毦瀹炵幇浜嗐€傛瘮濡傛垜瑕佺户鎵挎牱寮忥紝浣犲綋鐒朵細璇翠娇鐢⊿ass銆丩ess鎴栬€匰tylus绛夐澶勭悊鍣ㄥ氨鍙互鍋氬埌锛岄偅濡傛灉鎴戣缁ф壙榛樿鏍囩鐨勬牱寮忓苟杩涜鎵╁睍鍛紵鎴戞兂缁ф壙a鏍囩鐨勯粯璁ゆ牱寮忥紙涓嬪垝绾裤€佺偣鍑诲彉绾€佺偣鍑诲彉绱壊绛夛級鐒跺悗鍔犱笂涓€浜涘瓧浣撳ぇ灏忋€佽楂樼瓑鏍峰紡锛屽彧鑳芥墜鍐欎簡銆傞偅涔堟垜灏辩粰澶у浠嬬粛涓€涓湪React鐢熸€佷腑娴佽浣嗗湪Vue鐢熸€佷腑涓嶄负浜虹煡鐨勭煡鍚岰SS-in-JS搴擄細styled-components锛乿ue-styled-components椤惧悕鎬濅箟锛宻tyled-components灏辨槸涓€涓湁鏍峰紡鐨勭粍浠躲€傜敱浜巗tyled-components鏄笓闂ㄤ负React閲忚韩瀹氬仛鐨勫簱锛屼笉閫傚悎鍦╒ue椤圭洰涓娇鐢ㄣ€傛垜鐭ラ亾浣犵湅鍒拌繖涓瘏鍜掍竴瀹氬紑濮嬫€濊€冿細鎴戝叴鑷村媰鍕冨湴鐪嬩簡鍗婂ぉ锛屼綘鍗村憡璇夋垜styled-components涓嶉€傚悎鍦╒ue椤圭洰涓娇鐢紵涓嶇敤鎷呭績锛岃櫧鐒秙tyled-components涓嶈兘鍦╒ue椤圭洰涓娇鐢紝浣嗘槸styled-components鍥㈤槦涓撻棬涓篤ue鎵撻€犱簡涓€涓獀ue-styled-components锛屽拰React鐨剆tyled-components鐨勭敤娉曢潪甯哥浉浼笺€傚厛浠庢渶绠€鍗曠殑寮€濮嬫渚嬶紝棣栧厛瑕佸畨瑁咃細npmi-Svue-styled-components鎴栬€厃arnaddvue-styled-components鐒跺悗鍐欑粍浠跺氨鍙互涓嶇敤鍐嶅啓xxx.vue浜嗭紝鏇挎崲瀹冧笌xxx.js銆備綘鍙互绠€鍗曠悊瑙ｄ负杩欐槸涓€涓瀬绠€缁勪欢锛屾病鏈?template>鍜?script>锛屽彧鍏虫敞鏍峰紡锛屽啓娉曞涓嬸煈?/Flex.jsimportstyledfrom'vue-styled-components'constFlex=styled.div`鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱`export{flex}鍙互鐪嬪埌娌℃湁涔嬪墠鎴戜滑鐔熸倝鐨?template>import{Flex}from'@/components/Flex'exportdefault{name:'child1',components:{Flex}}鍙互鎵惧埌鎴戜滑娌℃湁瀹氫箟锛屼絾鍙互鎻掑叆鍒版甯镐綅缃€備細鑷姩鎵惧埌榛樿浣嶇疆鎻掑叆锛屽洜涓烘瘡涓爣绛鹃兘鏄竴涓粍浠讹紝涓嶄細鏈夋洿澶嶆潅鐨凞OM宓屽缁撴瀯鎺ヤ笅鏉ワ紝璁╂垜浠湅鐪嬪浣曞皢鍙傛暟浼犻€掔粰CSS锛?/Ok.jsimportstyledfrom'vue-styled-components'constOk=styled('div',{bg:{type:String,default:'#eee'}}锛塦瀹藉害锛?00px锛涢珮搴︼細100px锛沚ackground:${props=>props.bg}`export{Ok}鐜板湪styled鍚庨潰涓嶆槸鐩存帴璺熺潃涓€涓偣鍜屼竴涓瓧绗︿覆妯℃澘锛岃€屾槸鎶婄偣鎹㈡垚鎷彿锛岀涓€涓弬鏁版槸涓€涓瓧绗︿覆锛屼唬琛ㄤ粈涔堜綘鎯宠鐨凞OM鏍囩銆傜浜屼釜鍙傛暟鍜屼綘鍐欑殑vue缁勪欢涓殑props瀹屽叏涓€鏍凤紝涔熷彲浠ユ噿鐨勫啓鎴愭暟缁勭殑褰㈠紡锛?/Ok.jsimportstyledfrom'vue-styled-components'constOk=styled('div',['bg'])`瀹藉害锛?00px锛涢珮搴︼細100px锛沚ackground:${props=>props.bg}`export{ok}${}鍙互鍦ㄩ噷闈㈠啓涓€涓嚱鏁帮紝杩欎釜鍑芥暟杩斿洖鐨勭粨鏋滀細娓叉煋鎴愭渶缁堢殑CSS鍊笺€傝鍑芥暟鐨勭涓€涓弬鏁版槸鎮ㄥ畾涔夌殑灞炴€х殑闆嗗悎銆傚畾涔夊畬涔嬪悗锛屾垜浠湅鐪嬪浣曚娇鐢細//App.vue鍙互鐪嬪埌鎴戜滑浼犲叆鐨勫€煎畬缇庣敓鏁堬紝鍑芥暟涓篃鍙互鍐欎换鎰忚〃杈惧紡锛?/Ok.jsimportstyledfrom'vue-styled-components'constOk=styled('div',['bg'])`width:100px;楂樺害锛?00px锛涜儗鏅細${props=>{alert(666)杩斿洖閬撳叿銆傝儗鏅紵'green':'blue'}}`export{Ok}鍙互鐪嬪埌浣犲啓鐨勫嚱鏁伴€昏緫杩愯璧锋潵浜嗭紝鎴戜滑涔熷彲浠ョ粰娣诲姞涓€涓牱寮忥細importstyledfrom'vue-styled-components'//Router-link涓嶈兘鐩存帴瀵煎叆锛屼絾鏄痳outer-linkconstRouterLink=Vue.component('router-link')constStyledLink=styled(RouterLink)`color:#333;瀛椾綋澶у皬锛?em锛涙枃瀛椾慨楗帮細鏃狅紱`exportdefaultStyledLink浣跨敤鏃跺彧闇€瑕佸皢鏇挎崲涓?styled-link>鍗冲彲锛?styled-linkto="/">CustomRouterLink涔熸彁渚涗簡绫讳技浜庡叡浜暟鎹殑鍐欐硶Element-UI:import{ThemeProvider}from'vue-styled-components'newVue({//...components:{'theme-provider':ThemeProvider},//...})is浣跨敤鏃剁殑鏍圭粍浠讹細//...瀛愮粍浠堕渶瑕佹帴鏀朵竴浜涙暟鎹細constWrapper=styled.default.section`padding:4em;鑳屾櫙锛?{props=>props.theme.primary};`鐪嬩竴涓户鎵跨殑渚嬪瓙锛歩mportStyledButtonfrom'./StyledButton'constTomatoButton=StyledButton.寤堕暱`棰滆壊锛氱暘鑼勶紱border-color:tomato;`exportdefaultTomatoButton鍙互瀹岀編瀹炵幇鏍峰紡鐨勬墿灞曞拰澶嶇敤锛岀敋鑷冲彲浠ユ墿灞曞師鏈夌殑label:constButton=styled.button`background:green;鐧介鑹?`constLink=Button.withComponent('a')鍜孷ue鍘熺敓缁勪欢鐨勫姣攙ue-styled-components缂栬瘧鍚庝細鐢熸垚涓€涓殢鏈虹殑绫诲悕锛氳€孷ue鍘熺敓缁勪欢鍐欑殑style浼氱敓鎴愪竴涓殢鏈虹殑data-v-xxx灞炴€?杩欐牱鐨勮瘽锛岄€夋嫨鍣ㄧ殑鏁堢巼灏变細鏈夊緢澶х殑宸窛銆倂ue-styled-components鍙湁涓€涓€夋嫨鍣紝鑰屽師鐢熺粍浠舵槸涓や釜閫夋嫨鍣ㄧ殑缁勫悎锛屽睘鎬ч€夋嫨鍣ㄧ殑鏁堢巼姣旇緝浣庯紝鏄湅涓嶈鐨勩€傝繖鏄師鐢熺粍浠跺湪鎷夊紑宸窛鐨勬儏鍐典笅鍚慍SS浼犲€肩殑鍞竴閫斿緞锛氳€寁ue-styled-components鐨勫睘鎬у湪浼犲€煎悗涓嶄細鏄剧ず鍦ㄦ爣绛句笂锛岃€屾槸鐩存帴宓屽叆鍒癈SS涓細鑰寁ue-styled-components鍥犱负鏄疛S锛屾墍浠ュ彲浠ュ啓JS浠ｇ爜锛屽緢鏂逛究銆傝繕鏈夋洿澶氭湁瓒ｅソ鐜╃殑鍔熻兘璇风偣鍑伙細styled-components锛屽揩鍘荤敤杩欎釜涓滆タ閲嶆瀯浣犵殑椤圭洰鍚э紒