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

Question

我正在使用Angular 7.2.2和Typescript。

我正在通过index.html中的<script>标签从“ 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作为默认字体。

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

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

这使我认为样式被覆盖。

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