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

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

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

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

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

　　若父組件有scoped，子組件沒有設置，同樣，也是不能在父組件中設置子組件的節(jié)點的樣式的，因為父組件用了scoped，那么父組件中style設置的樣式都是唯一的了，不會作用于其他的組件樣式。

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

　　在style里添加scoped，用這種方式相當于在頁面上加入了唯一標示。

?

總結(jié)

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

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