样式穿透(修改第三方组件样式)

有时候在引用了第三方组件的时候,为了不污染全局样式,我们在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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。