谷歌地图的css覆盖了我自己的样式，如何防止这种情况？

Question

我正在将Angular 7.2.2与Typescript一起使用。

我正在通过index.html中的<script> -tag从“ https://maps.googleapis.com/maps/api/js?key=myAPIkey ”导入Google Maps

脚本加载完成后，我可以看到我的某些样式被Google Map的样式覆盖了整个应用程序。

如何防止这种情况并确保Google Map的样式仅应用于将在其中渲染地图的组件？

我试图从显示组件内部动态加载脚本，但是显然，样式封装仅适用于“ styleUrls”参数提供的样式。

谢谢！

Answer 1

因此，在您的角度应用程序中使用的类在Google Maps API样式中的名称相同。

样式将按照将它们放入angular.json文件中的顺序导入，然后，一旦初始化，则index.html文件将加载其脚本，该脚本将在从angular.json读取样式表之后发生。

因此，您似乎可以选择更改要覆盖的类的名称，以使Google不会覆盖它们，因为我不知道与当前Google Maps保持最新关系的Google Maps NPM软件包。您会找到一个，也可能会起作用。

Answer 2

谢谢大家，我想我已经回答了我的问题。

万一其他人因这个愚蠢的错误而迷迷糊糊：

我使用Angular Material，后者又将Roboto Medium作为默认字体。

由于我没有安装正确的webfont，因此我的应用程序使用Arial作为后备。

现在，当我加载还使用Roboto并正确加载该字体的Google Maps脚本时，我的整个应用程序从Arial切换到Roboto。

这使我认为样式被覆盖。

（感谢洛伦兹处理我的拙劣著作：）