Agm信息窗口自定义css

Question

我创建了一个agm-info窗口，它有一个图像和一个小文本(标题)：

<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

在styles.css中使用此CSS，因为组件css具有低优先级。

​

Answer 2

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