title: Missing MapBox CSS using React
body: <p>I'm trying to work with MapBox using React. I've created the project with create-react-app, added mapbox-gl ("mapbox-gl": "^0.46.0-beta.1"), but I have a problem with css file. It shows me this warning: </p>
  
  <p><code>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 in</code><a href="https://www.mapbox.com/mapbox-gl-js/api/" rel="noreferrer">https://www.mapbox.com/mapbox-gl-js/api/</a></p>
  
  <p>I've followed all steps:</p>
  
  <p>1 - Install the npm package: <code>npm install --save mapbox-gl</code></p>
  
  <p>2 - Include the CSS file in the  of your HTML file: <code>&lt;link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' /&gt;</code>. </p>
  
  <p>But how I'm using react with ES6, I've added in index.js css file <code>import 'mapbox-gl/dist/mapbox-gl.css';</code></p>
  
  <p>If I import css file, it doesnt show me anything, and If I comment that import it shows me map without desing and it shows me the warning.</p>
  
  <p>How can I solve it??? Thanks for your help</p>
  
  <p>Here is my code:</p>
  
  <pre><code>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', () =&gt; {
          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 (
          &lt;div className="App"&gt;
              &lt;div className="inline-block absolute top left mt12 ml12 bg-darken75 color-white z1 py6 px12 round-full txt-s txt-bold"&gt;
                &lt;div&gt;{`Longitude: ${lng} Latitude: ${lat} Zoom: ${zoom}`}&lt;/div&gt;
              &lt;/div&gt;
            &lt;div id="map" /&gt;
          &lt;/div&gt;
        );
    }
  }
  
  export default MapComponent;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pM2wW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pM2wW.png" alt="enter image description here"></a></p>
  
  <p>SOLUTION:</p>
  
  <p>As I said, I added mapbox-gl.css, <code>import 'mapbox-gl/dist/mapbox-gl.css';</code> but doesnt show the map.</p>
  
  <p>On css file shows next css attributes:</p>
  
  <pre><code>&lt;canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" width="951" height="844" style="position: absolute; width: 951px; height: 844px;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>I've modified canvas properties by this:</p>
  
  <pre><code>.mapboxgl-canvas {
      position: fixed !important;
      height: 100% !important;
  }
  </code></pre>
  
  <p>SOLVED:</p>
  
  <p>1 - <code>import 'mapbox-gl/dist/mapbox-gl.css';</code>
  2 - override css class called .mapboxgl-canvas</p>
  
  <pre><code>.mapboxgl-canvas {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
  }
  </code></pre>