问题:
1.如果不使用scoped属性,改公共组件的样式,就会污染到全局
2.设置scoped属性的话,直接覆盖样式不生效
需求:
vue组件中使用第三方组件库的组件,需要在这个组件中定制样式,又不想影响其他地方使用此第三方组件的样式
解决:
这时我们需要使用deep选择器,可以穿透scoped但又不会污染全局样式
请忽略下面代码
/deep/ .sg-select-selection {
border: 1px solid #0095fe;
background: none;
.sg-select-selected-value {
color: #fff;
}
> .iconfont {
color: #0095fe;
}
}
更新：
(https://upload-images.jianshu.io/upload_images/15605343-8766238bbaf17b21.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
由于chrome快不支持/deep/了
现在改为使用::v-deep
浏览器就不报警告了，happy
::v-deep.el-btn-small {
padding:8px 12px;
}
