vue3中的样式为什么加上scoped不生效

发布时间 2023-12-18 09:32:53作者: 代码一刀流

<style>标签添加scoped属性时,Vue会自动为该组件内的所有元素添加一个独特的数据属性,例如data-v-f3f3eg9。同时,它也会修改你的CSS选择器,使得它们只匹配带有这个独特数据属性的元素。这样做的目的是为了确保样式只应用于当前组件内的元素,避免影响到其他组件。
然而,当你尝试覆盖子组件(在这个例子中是Vant的van-cell组件)的样式时,你会遇到问题,因为子组件的根元素不会有这个独特的数据属性,因此它们不会被scoped样式所影响。
为了解决这个问题,你有几个选项:

  • 使用/deep/ 或 >>> 选择器(这些是旧版本的深度选择器,可能在某些构建系统中仍然有效):
<style lang="scss" scoped>
.my-cumstom-cell /deep/ .van-cell__value {
  text-align: left;
}
</style>
  • 使用 :deep() 伪函数(这是 Vue 3 推荐的方式):
<style lang="scss" scoped>
.my-custom-cell :deep(.van-cell__value) {
  text-align: left;
}
</style>

请注意,不同的构建工具和预处理器可能对深度选择器的支持有所不同。如果你在使用 Vue CLI,上述方法应该有效。如果你使用的是其他构建工具,可能需要查阅相应的文档来了解如何正确使用深度选择器。