vue在父组件中动态覆盖子组件内部的样式
原理是在子组件最外层添加一个自定义类名,通过css的后代选择器去判断覆盖是否生效
例:在vue组件中使用quill富文本编辑器,想要根据不同情况来判断是否展示边框,但边框的样式写在内部引入的样式文件中,直接在最外层的quilleditor组件上写border样式并不生效
解决办法:
在quilleditor标签上自定义newcontainer类,js代码如下:
<quillEditor
v-model="newContent"
ref="myQuillEditor"
:options="editorOption"
:class="isPreview ? 'newcontainer' : ''"
>
</quillEditor>
然后再style标签中基于该自定义类去选择子代样式,css代码如下:
.newcontainer .ql-container.ql-snow {
border: none;
}