vue在父组件中动态覆盖子组件内部的样式

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;
}