vue样式模块化和样式穿透(样式穿透一般用于在样式模块化(scoped)的情况下想要修改第三方组件)
2020-07-25 13:47
267 查看
vue样式模块化和样式穿透
1》style模块化
(如果不做模块化,那么当在B组件中引入A组件时,A组件里的样式也会影响到B组件,所以要在styel标签加上scoped使其模块化)
<style scoped>
2》样式穿透
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。
1、stylus的样式穿透 使用 >>>
.wrapper >>> .swiper-pagination-bullet-active background: #fff
2、sass和less的样式穿透 使用 /deep/
// 语法
外层 /deep/ 第三方组件 {
样式
}
.wrapper /deep/ .swiper-pagination-bullet-active{ background: #fff; }
提醒:要用到sass less stylus创建vue项目时记得选这个
相关文章推荐
- 理解Vue中的scoped实现原理及穿透方法 vue less不能修改第三方组件样式
- Vue中scoped穿透 修改第三方插件样式
- Vue中scoped穿透 修改子组件样式
- 基于vue的纯净checkbox组件,不依赖其他第三方库,导入即可使用,可自行修改样式
- Vue组件样式在有scoped的情况下如何设置第三方子组件样式
- 在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
- vue 可复用swiper以及scoped样式穿透(可以不受scoped的限制来修改样式)
- 在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
- vue开发中,父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
- 使用scoped穿透方法实现修改vue中mint UI组件样式
- vue组件中的样式属性scoped实例
- vue2.0用js和jquery设置包含v-if的组件样式无效的的情况
- Vue自定义class覆盖第三方组件原有样式
- vue中修改子组件样式
- vue笔记 修改element组件深层样式
- vue里修改iview组件的样式不生效
- Vue中父组件修改子组件样式方法(深度选择器)
- vue项目修改组件默认样式
- vue中通过修改element-ui的类修改相关组件的样式