css - Agm 信息窗口自定义 css

Question

我创建了一个带有图像和小文本（标题）的 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不工作？

Answer 1

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

Answer 2

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