天天看点

vue+elementUI项目中修改第三方组件的样式

修改前:

vue+elementUI项目中修改第三方组件的样式

修改代码:

深度选择器

.aaaa >>> .el-button{

padding-top: 0px;
padding-bottom: 0px;
width: 64px;
height: 29px;
line-height: 29px;
           

}

修改后:

vue+elementUI项目中修改第三方组件的样式

解决方案:

关于vue style scoped中通过使用css中>>>实现样式穿透的问题,

通常在Vue中使用第三方组件的时候,可能会存在修改组件的样式,比如aa.vue中引用了el-button组件,想修改el-button组件长,宽,因为aa.vue中的style使用了scoped属性,导致无法修改到el-button组件中的样式,这时候可以使用 >>> 实现样式穿透,使aa.vue的样式能够修改到el-button中的样式。

继续阅读