vue修改element-ui组件样式无效解决办法

1,357 阅读1分钟

如上图第一张为UI原型图,第二张为我的项目截图,在我想尽办法去更改的时候找到了一片文章首先感谢

博客园用户橘子king的分享

很多时候我们在运用第三方组件的时候想更改原组件样式,但是无法生效,但是有时候我们可以写公共样式文件或者APP.vue中它就可以生效,但是这样做会让样式文件很乱,一个页面一个样式文件,或者单独写在一起才能有效分辨,说重点

解决办法

使用 /deep/ 或者 >>> 穿透解决

.child /deep/ span {
*some prop
}

.child >>> span {
*some prop
}

有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)

外层 >>> 第三方组件 {

  样式

}

/deep/  第三方组件 {

  样式

}

本文章仅以自己防止忘记而记录,不管是我还是其他人,当你看到这篇文章的时候说明你还在从事前端工作,或者在学习前端,所以不管以后遇到什么问题,和挫折,都不要忘记你敲代码的初衷