問(wèn)題背景：el-tabs的選項(xiàng)卡默認(rèn)字體是14px，大了，想改成12px，結(jié)果在style里面加樣式總是不生效。

　　解決：樣式放到app.vue里面，樣式就生效了

.panel-content .el-tabs__item.is-top{font-size 12px }

　　原理分析：在vue組件中我們經(jīng)常需要給style添加scoped來(lái)使得當(dāng)前樣式只作用于當(dāng)前組件的節(jié)點(diǎn)。添加scoped之后，實(shí)際上vue在背后做的工作是將當(dāng)前組件的節(jié)點(diǎn)添加一個(gè)像”data-v-1233”這樣唯一屬性的標(biāo)識(shí)，當(dāng)然也會(huì)給當(dāng)前style的所有樣式添加[data-v-1233]這樣的話，就可以使得當(dāng)前樣式只作用于當(dāng)前組件的節(jié)點(diǎn)。

　　但是我們需要注意的是，如果我們添加了子組件，同樣的，如果子組件也用scoped標(biāo)識(shí)了，那么在父組件中是不能設(shè)置子組件中的節(jié)點(diǎn)的。

　　若父組件有scoped，子組件沒(méi)有設(shè)置，同樣，也是不能在父組件中設(shè)置子組件的節(jié)點(diǎn)的樣式的，因?yàn)楦附M件用了scoped，那么父組件中style設(shè)置的樣式都是唯一的了，不會(huì)作用于其他的組件樣式。

　　我在用vue-quill-editor富文本編輯器的時(shí)候就遇到了這個(gè)坑，我只是想讓內(nèi)容區(qū)設(shè)置一個(gè)高度，這樣的話，是必須在App.vue中設(shè)置的，我們App.vue相當(dāng)于根容器，沒(méi)有設(shè)置scoped，所以是可以設(shè)置的。

　　在style里添加scoped，用這種方式相當(dāng)于在頁(yè)面上加入了唯一標(biāo)示。

?

總結(jié)

以上是生活随笔為你收集整理的修改elementUI组件样式无效的问题研究的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。