如何从 mapbox 自定义弹出窗口

Question

我有 angular 8 应用程序，我可以显示一个弹出窗口。

但我想为弹出窗口设置样式。但是该怎么做呢？

所以我有这个模板：

  <mgl-layer
    *ngIf="imageLoaded"
    id="camera"
    type="symbol"
    [source]="{
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
       
      }
    }"
    (click)= "onClick($event)"
    [layout]="{'icon-image': 'camera', 'icon-size': 0.25}"
  >
  </mgl-layer>
  <mgl-popup *ngIf="selectedPoint" [feature]="selectedPoint">
    <span [innerHTML]="selectedPoint.properties?.description"></span>
  </mgl-popup>

和ts：

 allWifiPoints = this.wifiPoints.map((wifi) => ({
    type: 'Feature',
    properties: {
      description:
      // eslint-disable-next-line max-len   
    },
    geometry: {
      type: 'Point',
      coordinates: wifi,
    },
  }));


  onClick(evt: MapLayerMouseEvent) {
    this.selectedPoint = evt.features![0];
  }

和css：

  .mapboxgl-popup-content-wrapper {
    width: 89px;
   
  }

但没有任何改变。弹出窗口保持白色

看图。

那么我要改变什么？

谢谢

所以在 css 中：toggle-layer.component.scss

我有这个：

:host ::ng-deep .mapboxgl-popup-content-wrapper {
  width: 89px;
 
}

Answer 1

应该工作：

:host ::ng-deep .mapboxgl-popup-content-wrapper {
    width: 89px;
    height: max-content;
    border: 2px solid #BF0404;
    background-color: rgba(243, 207, 207, 0.7);
    border-radius: 18px;
    margin-bottom: 3px;
  }