html - 更改 CSS 类的默认样式

Question

我正在使用 mapbox api 来生成地图。我正在尝试使width和height等于 100%，但是该类mapboxgl-canvas有一个默认值，我不知道如何覆盖它。

<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" width="400" height="300" style="position: absolute; width: 400px; height: 300px;"></canvas>

它的高度为 300 像素，宽度为 400 像素。

CSS：

#map, .mapboxgl-canvas{
  width: 100% !important;
  height: 100% !important;
}

HTML：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab 2
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="map"></div>
</ion-content>

这是从 mapbox 加载地图的打字稿：

import {
  Component,
  OnInit
} from '@angular/core';
import {
  environment
} from '../../environments/environment.prod';
import * as Mapboxgl from 'mapbox-gl';
@Component({

  selector: 'app-tab2',

  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {

  constructor() {}
  title = 'view';
  map: Mapboxgl.Map;
  ngOnInit() {
    (Mapboxgl as any).accessToken = environment.mapboxKey;
    this.map = new Mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.810913, 10.985246], // LNG, LAT
      zoom: 14 // starting zoom
    });

    // Add zoom and rotation controls to the map.
    this.map.addControl(new Mapboxgl.NavigationControl());


  }

}

标签： htmlcsstypescriptionic-frameworkmapbox