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

尝试在div下的同一页中添加CSS。也许有冲突黑白，这就是为什么它什么都不会改变。

Answer 2

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