Styling is automatically imported but documentation says otherwise

[iamdriz]

Description

According to the Documentation here: http://visgl.github.io/react-map-gl/docs/get-started/get-started#styling

The CSS should be included like so: import 'mapbox-gl/dist/mapbox-gl.css'; This would also allow you to easily opt-out of the standard CSS or overwrite it.

However what happens is that the CSS is included without having to do this... looking at the developer tools it's being imported from https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css.

Why is this happening, if the Documentation states it must be manually imported? And how can I stop this if I wanted to stop it from being imported (e.g. loading a custom localized one).

[Pessimistress]

It is recommended that you import the stylesheet yourself. When a map is rendered, we check if a stylesheet exists:

react-map-gl/src/mapbox/mapbox.js

Lines 416 to 420 in 376dc5c

	const testElement = document.createElement('div');
	testElement.className = 'mapboxgl-map';
	testElement.style.display = 'none';
	document.body.appendChild(testElement);
	const isCssLoaded = window.getComputedStyle(testElement).position !== 'static';

If not then a default one is attached automatically.

Why is this happening

There were too many complaints from users who failed to include the stylesheet in their apps and the components didn't work.

And how can I stop this if I wanted to stop it from being imported

Your custom stylesheet should contain an entry of .mapboxgl-map to pass the above test. If you are using maplibre see #1513.