javascript - de CSS van Google Maps overschrijft mijn eigen stijlen, hoe kan ik dat voorkomen?

Ik gebruik Angular 7.2.2 met Typescript.

Ik importeer Google Maps van "https://maps.googleapis.com/maps/api/js?key=myAPIkey" via een <script>-tag in mijn index.html

Zodra het script klaar is met laden, kan ik zien dat een deel van mijn stijlen overal in de applicatie wordt overschreven door de stijlen van Google Maps.

Hoe kan ik dit voorkomen en ervoor zorgen dat de stijlen van Google Maps alleen worden toegepast op het component waarin ik de kaart zal weergeven?

Ik heb geprobeerd het script dynamisch te laden vanuit de weergevende component, maar blijkbaar werkt de stijlencapsulatie alleen voor stijlen die worden geleverd via de "styleUrls"-parameter.

Dank je!

Antwoord #1

Bedankt jongens, ik denk dat ik het antwoord op mijn vraag heb.

Voor het geval iemand anders over die stomme fout struikelt:

Ik gebruik Angular Material, dat op zijn beurt Roboto Medium als standaardlettertype gebruikt.

Omdat ik het juiste webfont niet had geïnstalleerd, gebruikte mijn applicatie Arial als alternatief.

Nu, wanneer ik het Google Maps-script laad, dat ook Roboto gebruikt en dat lettertype correct laadt, schakelt mijn hele toepassing van Arial naar Roboto.

Dat deed me denken dat stijlen worden overschreven.

(En bedankt Lorenz voor het omgaan met mijn slechte schrijfwerk :))

Antwoord #2

Dus de klassen die je in je Angular-app gebruikt, hebben dezelfde naam als de stijlen van de Google Maps API.

Je stijlen worden geïmporteerd in de volgorde waarin je ze hebt staan in je angular.json bestand, daarna laadt je index.html-bestand de scripts zodra het is geïnitialiseerd, wat gebeurt nadat je stijlenbladen uit angular.json zijn gelezen.

Het lijkt er dus op dat je optie is om de naam van de klassen die worden overschreven te wijzigen, zodat Google ze niet overschrijft, omdat ik geen NPM-pakket voor Google Maps ken dat up-to-date wordt gehouden met de huidige Google Maps, maar als je er een vindt, kan dat misschien ook werken.