更改elementUI組件樣式而不會影響到全局樣式


elementUI是最近十分流行的一個前端框架,但是它的很多樣式我們並不能工作中直接使用,往往需要對樣式進行重寫,直接更改樣式時,特別是頁面中引入了多個組件,組件間的樣式很容易相互影響。

例如在el-table中使用el-popover組件,就會出現這樣的問題:

 

 通過審查元素我們發現,因為 .el-table__body-wrapper 和.el-table中有一個overflow:hidden屬性,但是直接修改會影響其他組件,所以要指定是哪一個元素下的.el-table__body-wrapper 、.el-table
直接使用sass語法:

<style rel="stylesheet/scss" lang="scss">
    #sizerTable{
      .el-table__body-wrapper{
           overflow: visible;
       }
       .el-table{
           overflow: visible;
       } 
    }
</style>
修改后:

 

 就ok了~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM