vue项目写的样式应用不到元素上？elementUI等框架的坑

Posted 2022-12-05 Ultraman_agul

vue项目写的样式应用不到元素上？

• scoped原理
• 接着坑就来了
• 解决方法
• • 1、修改父元素的样式
  • 2、深度作用选择器

使用vue+elementUI写个项目时发现写的样式应用不到元素上，任凭!important也毫无作用！看看你是否也踩了这个坑吧！

scoped原理

我们都知道style标签添加scoped属性时，里面写的样式代码只会作用到当前的模板(template)上，这样的好处是可以避免全局污染。
原理是scoped属性会让当前模板上的标签添加自定义的属性并且style中的样式都会添加属性选择器对当前元素的获取。

实际页面中：

如此一来就能实现scoped中的样式之前当前模板中生效了，因为各个组件中的属性值都是不同的。

接着坑就来了

当我引入elementUI时，我需要自定义样式覆盖ui框架的样式时出现了样式无法应用上去的问题。打开控制台，找到想要覆盖的元素的class值，添加css进行覆盖。

但是此时并不能如我所愿，这是因为ui框架的组件内部是没有添加到自定义属性的，外层组件才有，而我们的css又全都会添加属性选择器，这样自然就获取不到元素了，写不了样式。

解决方法

针对这个问题，vue也提供了解决方法。

1、修改父元素的样式

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

2、深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b  /* ... */ 
</style>

编译成:

.a[data-v-f3f3eg9] .b  /* ... */ 

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用/deep/操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。