Leaflet+OpenStreetMap中SCSS样式无法生效问题咨询

核心原因 #

从你使用search.component.scss这类组件样式文件判断，你应该是基于Angular框架开发。Angular默认开启样式封装机制，组件内的SCSS样式仅会作用于组件模板DOM树内部的元素。但Leaflet通过divIcon生成的.number-marker元素，会被添加到Leaflet的全局地图容器（比如leaflet-marker-pane）中，不在当前组件的DOM结构范围内，因此组件SCSS的样式无法穿透到这些标记元素。而内联样式直接绑定在元素本身，不受样式封装限制，所以能正常生效。

解决方法 #

方法1：用:host ::ng-deep穿透样式封装 #

在组件SCSS中使用::ng-deep配合:host，既让样式作用到组件外的元素，又避免污染全局样式：

:host ::ng-deep .number-marker {
  background-color: #ff0000;
  color: #ffffff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background-color: #00ff00;
    color: #000000;
  }
}

:host限定了样式仅在当前组件的作用域下生效，不会影响其他组件的同名类。

方法2：将样式移至全局样式文件 #

把.number-marker的样式复制到项目全局样式文件（比如src/styles.scss），全局样式会作用于整个应用的所有DOM元素，包括Leaflet生成的标记：

// styles.scss
.number-marker {
  background-color: #ff0000;
  color: #ffffff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background-color: #00ff00;
    color: #000000;
  }
}

方法3：关闭组件样式封装（不推荐） #

在组件装饰器中设置encapsulation: ViewEncapsulation.None，关闭组件的样式封装，但这会让组件样式变成全局样式，容易引发样式冲突：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class SearchComponent {
  // 组件现有代码
}

内容的提问来源于stack exchange，提问作者Fatih Furkan Çambel