通过::v-deep修改本组件ElementUI的样式

357 阅读1分钟

最近在做项目的时候,本来使用ElementUI做,UI突然说某个页面的ElementUI的样式不好看,如果改变全局,那么其他地方的界面就非常丑。

这样就需要在本组件修改ElementUI组件的样式,最开始是通过浏览器的F12找到元素对应的class,然后通过class选择器修改,但是这样没有生效,可能是权重问题也可能是别的原因。没有深究。

于是开始面向bd的编程,找了很多方法,主要分为3种:

第一种是scss/less嵌套的写法,这种写法我用了,也没生效。

第二种是通过/deep/,但是同样没生效,还报错。

第三种通过::v-deep的方式,成功了,只修改了本组件的样式,没有影响到全局的样式,但是这种方式好像只能在less/scss中使用,普通的css语法不支持。

::v-deep .el-tree-node:focus>.el-tree-node__content{
    background-color: rgb(151, 142, 142); // 点击el-tree节点后的背景颜色
  }

使用::v-deep没有报错,记录一下,以免以后忘了。