Css Mapbox GL自定义控件应用自定义样式

对于网站

Angular 8

，

Typescript

和

SCSS

。 要显示地图，请使用mgl地图

。
现在我想为它创建一个自定义控件，并对其应用自定义样式

我使用以下方法将其添加到地图中：

  const centerOnCoordinatesControl = new CenterOnCoordinatesControl();
  this.mapBoxMap.addControl(centerOnCoordinatesControl, 'bottom-left');

这很好，但我的自定义样式不会应用于自定义控件


为了检查css样式是否被加载，我在map控件外创建了相同的元素：


location.component.html:

<mgl-map class="mapbox-map"
         [style]="defaultStyle"
         [zoom]="zoom"
         [center]="grazCoord"
         (click)="onMapClick($event)"
         (load)="mapLoaded($event)">
         <mgl-control mglScale unit="metric" position="bottom-right"></mgl-control>
         <mgl-control *ngIf="this.mapBoxMap" mglFullscreen position="top-right"></mgl-control>
         <mgl-control *ngIf="this.mapBoxMap" mglGeolocate position="top-right"></mgl-control>
</mgl-map>

.custom-center-control {
    font-size: x-large;
    color: green;

    &:hover {
        color: $cities-orange-light;
    }
}

location.component.scss:

<mgl-map class="mapbox-map"
         [style]="defaultStyle"
         [zoom]="zoom"
         [center]="grazCoord"
         (click)="onMapClick($event)"
         (load)="mapLoaded($event)">
         <mgl-control mglScale unit="metric" position="bottom-right"></mgl-control>
         <mgl-control *ngIf="this.mapBoxMap" mglFullscreen position="top-right"></mgl-control>
         <mgl-control *ngIf="this.mapBoxMap" mglGeolocate position="top-right"></mgl-control>
</mgl-map>

.custom-center-control {
    font-size: x-large;
    color: green;

    &:hover {
        color: $cities-orange-light;
    }
}

我不明白为什么样式会应用于地图外的样式，而不是地图内的CustomControl

我怎样才能让它工作

如果您需要更多信息，请告诉我。
尝试封装方法添加此
封装：视图封装。无
致您的装饰师：

例如：

@Component({
  selector: 'my-custom-input',
  templateUrl: 'src/my-custom-input.component.html',
  styleUrls:['src/my-custom-input.component.css'],
  encapsulation: ViewEncapsulation.None
})

尝试封装方法添加此
封装：ViewEncapsulation.None
致您的装饰师：

例如：

@Component({
  selector: 'my-custom-input',
  templateUrl: 'src/my-custom-input.component.html',
  styleUrls:['src/my-custom-input.component.css'],
  encapsulation: ViewEncapsulation.None
})