Отсутствует CSS MapBox с использованием React

Я пытаюсь работать с MapBox с помощью React. Я создал проект с помощью приложения create-response-app, добавил mapbox-gl ("mapbox-gl": "^ 0.46.0-beta.1"), но у меня проблема с файлом css. Он показывает мне это предупреждение:

This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described inhttps://www.mapbox.com/mapbox-gl-js/api/

Я выполнил все шаги:

1 - Установите пакет npm: npm install --save mapbox-gl

2 - Включите файл CSS в свой HTML-файл: <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />.

Но как я использую реакцию с ES6, я добавил в index.js файл css import 'mapbox-gl/dist/mapbox-gl.css';

Если я импортирую файл css, он мне ничего не показывает, и если я прокомментирую этот импорт, он показывает мне карту без дизайна и показывает мне предупреждение.

Как я могу это решить ??? Спасибо за вашу помощь

Вот мой код:

import React, { Component } from 'react';

import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'my_token';

class MapComponent extends Component {

  constructor(props) {
      super(props);
      this.state = {
        lng: 1.2217,
        lat: 39.8499,
        zoom: 6.48
      };

    }

  componentDidMount() {
      const { lng, lat, zoom } = this.state;

      var map = new mapboxgl.Map({
        container: 'map',
        center: [lng, lat],
        style: 'mapbox://styles/mapbox/streets-v10',
        zoom: zoom
      });

      map.on('move', () => {
        const { lng, lat } = map.getCenter();

        this.setState({
          lng: lng.toFixed(4),
          lat: lat.toFixed(4),
          zoom: map.getZoom().toFixed(2)
        });
      });
  }

  render() {
      const { lng, lat, zoom } = this.state;
      return (
        <div className = "App">
            <div className = "inline-block absolute top left mt12 ml12 bg-darken75 color-white z1 py6 px12 round-full txt-s txt-bold">
              <div>{`Longitude: ${lng} Latitude: ${lat} Zoom: ${zoom}`}</div>
            </div>
          <div id = "map" />
        </div>
      );
  }
}

export default MapComponent;

РЕШЕНИЕ:

Как я уже сказал, я добавил mapbox-gl.css, import 'mapbox-gl/dist/mapbox-gl.css';, но не показывает карту.

В файле css показаны следующие атрибуты css:

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

Я изменил свойства холста следующим образом:

.mapboxgl-canvas {
    position: fixed !important;
    height: 100% !important;
}

РЕШЕНО:

1 - import 'mapbox-gl/dist/mapbox-gl.css'; 2 - переопределить класс css с именем .mapboxgl-canvas

.mapboxgl-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}