Agm 信息窗口自定义 css答案

【问题标题】：Agm info window custom cssAgm 信息窗口自定义 css
【发布时间】：2021-03-20 10:01:51
【问题描述】：

我创建了一个带有图像和小文本（标题）的 agm-info-window：

<agm-marker [latitude]="lat3" [longitude]="lng3" [iconUrl]="icon">
    <agm-info-window [disableAutoPan]="true" [isOpen]="true">
        <div routerLink="/sight/2">
            <img src="assets/mesta/tvrdjava.jpg" alt="Image" width="80" height="80"> <br>
            <span class="window-title"> Bubanj </span>
        </div>
    </agm-info-window>
</agm-marker>

这是结果：

我想更改信息窗口 css。 - 背景颜色，移除关闭按钮 (x) 并将文本放在中间。像这样：

当我在 Chrome 的检查器中设置 CSS 时，我得到了正确的效果。我设置：

/* Remove the X, close button */
.gm-ui-hover-effect {
    display: none;
}

.gm-style-iw {
    padding: 0;
    background-color: #AAAAAA;
    text-align: center;
    color: white;
}

/* remove overflow scroll */
.gm-style-iw-d {
    overflow: none;
}

但是当我把这个相同的 css 放在组件 css 中时，它根本没有改变，什么都没有改变。

我没有太多改动，所以我不想使用时髦的信息窗口。我只想对窗口进行这些小改动。可能吗？为什么 css 不工作？

【问题讨论】：

你试过用!important 到css属性吗？
是的，试过了，没有。 @肯尼
@Kenny 使用 !Important 不是好习惯
尝试在全局样式中添加这个 css 而不是组件 css
并确保样式表实际上是嵌入的并且排在最后（以确保它不会被其他东西覆盖）

标签： css angular google-maps agm-map

【解决方案1】：

在styles.css 中使用这个CSS，因为组件css 的优先级较低

【讨论】：

【解决方案2】：

尝试在 div 下的同一页面中添加 css。也许有 cinflict b/w 这就是为什么它不会改变任何东西。

【讨论】：