Agm信息窗口自定义CSS不生效问题：如何修改默认样式？

完全可行！你的CSS在组件文件里不生效，核心原因是Angular默认的视图封装机制——组件的样式只会作用于自己模板内的元素，而AGM生成的.gm-ui-hover-effect、.gm-style-iw这些类属于Google Maps动态创建的外部DOM节点，不在你的组件视图范围内，所以组件样式无法命中它们。

下面给你几种简单的解决办法，按需选择：

方法一：用::ng-deep穿透样式（最推荐） #

这是最适合你这种局部小修改的方式，通过::ng-deep让组件样式穿透到外部DOM节点，同时用:host限制只作用于当前组件的info window：

在你的组件CSS文件里修改为：

:host ::ng-deep {
  /* 移除关闭按钮 */
  .gm-ui-hover-effect { 
    display: none; 
  }

  /* 修改info window背景、内边距、文本对齐和文字颜色 */
  .gm-style-iw { 
    padding: 0; 
    background-color: #AAAAAA; 
    text-align: center; 
    color: white; 
  }

  /* 移除滚动条（注意：overflow没有none值，用hidden才对） */
  .gm-style-iw-d { 
    overflow: hidden; 
  }
}

方法二：放到全局样式文件 #

如果你不想用::ng-deep，可以把这段CSS直接放到项目根目录的styles.css（或styles.scss）里，全局样式会作用于所有DOM元素：

/* 在styles.css中添加 */
.gm-ui-hover-effect { 
  display: none; 
}
.gm-style-iw { 
  padding: 0; 
  background-color: #AAAAAA; 
  text-align: center; 
  color: white; 
}
.gm-style-iw-d { 
  overflow: hidden; 
}

⚠️ 注意：这种方式会影响项目中所有的Google Maps信息窗口，如果你只有这一个窗口需要修改，方法一更稳妥。

方法三：关闭组件的视图封装（不推荐） #

通过关闭组件的视图封装，让组件样式变成全局样式，但这种方式容易引发样式冲突，只适合非常简单的场景：

在组件的TS文件中修改：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-component-selector', // 替换成你的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭视图封装
})
export class YourComponentComponent {
  // 你的组件逻辑代码
}

之后就可以在组件CSS里直接写原来的样式了。

内容的提问来源于stack exchange，提问作者IkePr