CSS карты Google переопределяет мои собственные стили, как я могу предотвратить это?

Question

Я использую Angular 7.2.2 с Typescript.

Я импортирую Карты Google из тега "https://maps.googleapis.com/maps/api/js?key=myAPIkey" через <script> в моем index.html

Как только скрипт завершит загрузку, я вижу, что некоторые из моих стилей перезаписываются по всему стилю приложения Google Map.

Как я могу предотвратить это и убедиться, что стили Google Map применяются только к компоненту вкакую карту я буду рендерить?

Я попытался динамически загрузить скрипт из компонента отображения, но очевидно, что инкапсуляция стилей работает только для стилей, предоставленных параметром "styleUrls".

Спасибо!

Answer 1

Спасибо, ребята, я думаю, что у меня есть ответ на мой вопрос.

В случае, если кто-то еще оступится из-за этой глупой ошибки:

Я использую Angular Material, который, в свою очередь, использует Roboto Medium в качестве шрифта по умолчанию.

Поскольку я не установилправильный веб-шрифт, мое приложение использовало Arial как запасной вариант.

Теперь, когда я загружаю скрипт Google Maps, который также использует Roboto и корректно загружает этот шрифт, все мое приложение переключается с Arial на Roboto.

Это заставило меня думать, что стили перезаписаны.

(И спасибо Лоренцу за то, что он обработал мое плохое письмо :))

Answer 2

Таким образом, классы, которые вы используете в своем угловом приложении, называются одинаково в стилях из Google Maps API.

Ваши стили импортируются в том порядке, в котором они есть в вашем файле angular.json, тогда ваш файл index.html загружает свои скрипты после инициализации, что происходит после чтения таблиц стилей из angular.json.

Так что, кажется, вы можете изменить имя классов, которые используютсяперезаписаны, чтобы Google не перезаписывал их, потому что я не знаю пакета NPM для карт Google, который обновляется с текущими картами Google, но если вы его найдете, он тоже может работать.