前言：vue+elementUI項目開發(fā)中，經(jīng)常遇到修改elementUI組件樣式無效的問題，

原因：在vue組件中我們經(jīng)常需要給style添加scoped來使得當(dāng)前樣式只作用于當(dāng)前組件的節(jié)點。添加scoped之后，工作原理是將當(dāng)前組件的節(jié)點添加一個像”data-v-fae5bece”這樣唯一屬性的標(biāo)識，這樣就可以使得當(dāng)前樣式只作用于當(dāng)前組件的節(jié)點。效果如下

?

測試項目結(jié)構(gòu)是Home組件包含MiddleContainer組件、leftCharts層和rightCharts層，如下

如果各個嵌套的父子組件都使用scoped作用域擁有了有各自的唯一標(biāo)識，類似于組件樣式相互獨立了，那么一般情況下，在父組件<style scoped>內(nèi)樣式不能設(shè)置子組件的節(jié)點elementUI樣式，同樣子組件<style scoped>內(nèi)樣式不能設(shè)置子父組件的節(jié)點的elementUI樣式，所以產(chǎn)生修改elementUI組件樣式無效的問題。

?

?

?

?

解決方式：

?

方法一：在app.vue根節(jié)點上修改樣式進行全局覆蓋

局部子組件MiddleContainer.vue如下

? <template><div class="MiddleContainerPage"><p>這里是middleContainer 組件頁面</p><div class="test"><a href="#">測試</a></div><el-button type="primary">測試在app.vue根組件上修改的效果</el-button></div> </template><style lang="scss" scoped>.MiddleContainerPage {color:green;font-size: 2rem;.el-button--primary{color:orange;}} </style>

app.vue組件如下

<style lang="scss"> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;width:100%;height:100%;color:#fff;.MiddleContainerPage .el-button--primary {color:red;}} </style>

注意:?<style lang="scss">不包含scoped

?

App.vue是項目的主/根組件，所有頁面都是在App.vue下進行切換的。其實你也可以理解為所有的路由組件也是App.vue的子組件。這里測試發(fā)現(xiàn)?修改app.vue根節(jié)點的樣式可以覆蓋使用了scoped的子組件樣式。也就是app.vue的樣式等級高于使用了scoped的子組件樣式等級。

?

?

?

?

方法二：去除局部/子組件scoped的style屬性

該方法是去除局部/子組件的scoped作用域?qū)傩?#xff0c; 并定義一個類名或者Id來增加當(dāng)前組件的命名空間，使當(dāng)前<style >樣式實現(xiàn)類似<style scoped >劃分組件塊的效果，達到不影響組件樣式的目的。所以項目開發(fā)中會習(xí)慣為每一個組件的根節(jié)點添加一個類名或者Id來聲明當(dāng)前組件的命名空間，如下的class=“MiddlerContainerPage”

<template><div class="MiddleContainerPage"><p>這里是middleContainer 組件頁面</p><div class="test"><a href="#">測試</a></div><el-button type="primary">測試在app.vue根組件上修改的效果</el-button></div> </template><style lang="scss">.MiddleContainerPage {color:green;font-size: 2rem;.el-button--primary{color:orange;}} </style><style>.MiddleContainerPage .el-button--primary{color:red;} </style>

?

?

?

<style scoped >中使用深度選擇器影響子組件

?

在<style scoped >樣式中使用深度選擇器影響子組件，可以使用 >>> 操作符，使用如下

.MiddleContainerPage >>>.el-button--primary{color:red;}

在?SCSS / Sass 之類的預(yù)處理器無法正確解析 >>>, 所以?/deep/ 操作符取而代之，代碼如下

.MiddleContainerPage /deep/.el-button--primary{color:red;}

注意事項：

CSS 作用域不能代替 class。考慮到瀏覽器渲染各種 CSS 選擇器的方式，當(dāng) p { color: red } 設(shè)置了作用域時 (即與特性選擇器組合使用時) 會慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影響就會消除。你可以在這塊試驗田中測試它們的不同。
在遞歸組件中小心使用后代選擇器! 對選擇器 .a .b 中的 CSS 規(guī)則來說，如果匹配 .a 的元素包含一個遞歸子組件，則所有的子組件中的 .b 都將被這個規(guī)則匹配。

?

?

參考網(wǎng)址：https://blog.csdn.net/xiazeqiang2018/article/details/81190275

總結(jié)

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

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