Vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过 >>>,穿透 scoped。
有些 Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符。
>>>:用于原生 css 写法
/deep/: 用于 Sass、less … 之类的预处理器
先手直接说方法:在需要更改的组件里新增一个style标签【重点:不要加scoped】,然后直接获取class设置样式就可以咯,class自己去浏览器里右键审查元素可得到。
建议:在获取到的样式里加上能限制范围的父层选择器,不然就变成全局样式咯
<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>