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

这是打字稿，可从地图框加载地图：

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());


  }

}