更改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