详解Vue中CSS样式穿透问题

1. 问题由来

在做两款H5的APP项目，前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想，组件不丰富，最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4（项目结构 webpack+vue+vue-store+vue-router+vant+less）。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式，方便了我们开发者，同时又因高度封装，有时也会给我们带来一点点困扰。比如，在使用vant组件库中的环形进度条时，查看官方文档，有改变进度条颜色，有改变轨道颜色，也有改变填充颜色。就是没有改变显示文字颜色的。凑巧的是，我们的需求就是要改变文字颜色。怎么办呢？写个css不就好了么。

2. 编写样式

为了说明情况，我为本文专门配合了一个测试demo。假如您现在也已经初始化好了一个Vue项目，并引入了我们需要的vant组件库。接下来，我们在components文件夹中新建一个

CssScope.vue

<template>
<div><van-circle v-model="currentRate" :rate="90" :speed="100" :text="text" /></div>
</template>
<style lang="less" scoped>
</style>
<script>...</script>

编译运行，我们在浏览器就会看到一个进度为90%的环形进度条。当然显示文字90%显示是黑色，现在我们就来改变它。

最初我们想到，文字颜色color是可以从父级继承的，所以我们在Style标签中写下如下css样式：

<style lang="less" scoped>
.van-circle{color:blue;}
</style>

回到浏览器，文字颜色没变。通过Chrome的开者工具，找到我们的圆形进度条。才发现，原来，这个组件内部是一个svg 和 div 标签组成，svg用于显示我们图形，div用于显示文字。并且在这个div上存在一个class 为 van-circle__text。根据css优先级，我们刚在父级设置的字体颜色无效。找到原因，那就好办了。我们需要在Style标签中定义这个class选择器，并设置它字体颜色为蓝色。于是我们删除刚写的样式，改写为如下：

<style lang="less" scoped>
.van-circle{
  .van-circle__text{olor:blue;}
}
</style>

这下应该可以了，可回到浏览器，效果依旧。黑色，还是黑色。此时，回到chrome，在开发者工具找到我们的元素。仔细的你才发现，显示文字的标签和它的父级好像不一样，少个data-v-xxx的属性。也许是style的 scoped搞鬼，那我们就去掉。回到浏览器，文字颜色居然改变了。欢喜之余，总感觉哪里不对？我们得查查这个水鬼scoped