vue 组件不受全局样式影响_Vue——解决使用第三方组件库时无法修改默认样式的问题（使用 /deep/ ）...

98 阅读 0 评论 65 点赞

最近在开发一个基于Vue的后台管理系统，其中使用了element-ui第三方ui组件库。使用过组件库的人都知道，第三方组件往往会有一些默认的样式，而有些又是我们想要改变的。

一、基础(了解的 scoped 属性)

在编写Vue代码过程中，为了不让父组件相同样选择器名称设置的样式影响到子组件，我们往往会给标签设置 scoped 属性。但是如果设置了scoped属性，在该组件内的 Css 就只能作用于当前组件中的元素。

实际上，它是通过使用 PostCSS 来实现以下转换：

.example {

color: red;

}

转换为：

.example[data-v-f3f3eg9] {

color: red;

}

当然，我们也可以混合地使用本地样式和全局样式：

/* 全局样式 */

/* 本地样式 */

关于子组件根元素的样式结果，还需要单独叙述一下：

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

二、问题(使用第三方组件库时修改默认样式)

接下来，就介绍和解决一下，使用第三方组件库时遇到的问题——无法修改默认样式。

在项目中使用 element-ui 组件库，

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。