How to customise popup from mapbox

I have angular 8 application and I can show a popup.

But I want to style the popup. But how to do that?

SO I have this template:

  <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>

and 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];
  }

and css:

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

but nothing change. The popup stays white

see image.

So what I have to change?

Thank you

So in css: toggle-layer.component.scss

I have this:

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

Answer

Should work:

: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;
  }