有时候在引用了第三方组件的时候,为了不污染全局样式,我们在style上加一个scoped修饰符,这个样式就只在当前组件的范围内有效,在当前页面想要修改第三方组件的样式就难了,加了!important也是不行的。这时候还非要修改的话就得用到样式穿透了。下面说几种修改的方式。
1、普通css,在要修改的样式前添加>>>符号,实际上>>> ::v-deep /deep/ 这三个都行
<style scoped>
::v-deep .u-popup__content__close{
position: relative;
}
</style>
2、scss 在要修改的样式前添加 ::v-deep 或者/deep/
<style lang="scss" scoped>
::v-deep .u-popup__content__close{
position: relative;
}
</style>