高德地图的弹窗样式不生效？

最近做gis项目遇到的一个问题记录一下

这是一部分代码，简单定义了一个海量点类，然后加上鼠标事件，生成一个信息窗体。

注意这个class，你会发现在具体项目运行中，这个红色的字体并没有生效，这是为什么呢？

经过调试，发现是scoped属性导致的

最简单粗暴的办法是删掉scoped，当然，要在这个样式不造成其他影响的时候。

还有一种解决办法是样式穿透。

vue2的样式穿透方法有几种：

（1）>>>（适用于css原生样式）

（2）/deep/

vue3最新的样式穿透：

::v-deep已经被弃用，用:deep(<inner-selector>)替代，如：

:deep(.names) {
    color: red;
    font-size: 20px;
}

这些都可以解决这个问题。

问题虽然解决了，但是原因呢？

如上代码，我们的class类写在本组件的content里面，这个给了很多人一个误导，会默认这段代码就在本组件。

其实，当我们创建一个信息窗体 infoWindow 的时候，高德API会帮我们创建一个信息窗体的子组件，在Dom结构里面可以看到names被包裹了几层。

这就导致了，当样式中加了scoped属性时候，编译的时候会自动给每一个dom节点都添加一个不重复的自定义属性，例如：data-v-4cd6f8b2（在同一个组件中，添加在所有节点上这个属性是一样的，反之是不一样的）。这就是样式没有生效的原因，使用样式穿透也是为了达到相同的效果。