Vue CSS 穿透 scoped (>>> || /deep/ )

简介: Vue CSS 穿透 scoped (>>> || /deep/ )

Vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过 >>>,穿透 scoped。

有些 Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符。

>>>:用于原生 css 写法

/deep/: 用于 Sass、less … 之类的预处理器

<style scoped>
  外层 >>> 第三方组件 {
    样式
  }
  /deep/ 第三方组件 {
    样式
  }
</style>

ckeditor 为第三方组件,现在我需要修改里面一个 class=“ck-content” 的标签,

那么我需要在 ckeditor 外层自己新加一个div进行包裹它,不能直接在 ckeditor 身上设置class 或者 id,否则不会生效。然后在通过我自己新加的div的 class 去进行定位 .ck-content 。

<div class="ckeditor">
   <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
<style scoped>
普通穿透
.ckeditor >>> .ck-content {
  height: 300px;
}
如果普通穿透不生效,添加 !important
.ckeditor >>> .ck-content {
  height: 300px !important;
}
</style>
相关文章
|
4天前
|
JavaScript 前端开发
react Or vue中引入animate.css
本文介绍了如何在React或Vue项目中引入animate.css库来使用动画效果,包括通过npm安装或在线链接引入,并展示了如何在React组件和Vue路由过渡中使用动画类。
15 0
|
1月前
|
前端开发
Vue3——使用deep进行样式穿透的时候发出v-deep警告
Vue3——使用deep进行样式穿透的时候发出v-deep警告
37 3
|
1月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
58 0
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
|
2月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
105 2
|
2月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
56 1
|
2月前
|
前端开发 JavaScript
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
vue实战范例——箭头步骤条/导航(含css 斜切skew的妙用)
162 0
|
2月前
|
前端开发 JavaScript
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
vue 自定义气泡弹窗 $pop (内含css晃动动画shake制作)
43 0
|
1天前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
1天前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
1天前
|
JavaScript 网络架构