自从npm和yarn问世,导入各种资源方便了许多,但是资源的样式也不能向以前那样直接更改文件,因为第三者导入该项目并不能同步更改。因此,想更改资源样式,多采用覆盖的形式。但这又延伸一个新问题,许多资源直接样式覆盖并没有效果。如wangEditor,想更改其样式,其编辑框样式如下:
.w-e-text-container {
background-color: var(--w-e-textarea-bg-color);
color: var(--w-e-textarea-color);
height: 100%;
position: relative;
}
它直接在:root里面定义颜色变量,再引用,如果直接覆盖:
.w-e-text-container {
background-color: #000 !important; // !important优先级最高
}
是不会起作用的,这里就需要用到vue3推出的样式穿透(::v-deep)。
::v-deep .w-e-text-container{
background-color: transparent;
color: #f0f0f0;
}
这时编辑框的样式就修改了。