如何在屏幕右下角放置一个 p-growl 元素？

Question

我希望将咆哮消息固定在右下角，并且我一直在尝试通过覆盖 p-growl 的 css 类来做到这一点。我的第一次尝试是像这样覆盖.ui-growl 类：

::ng-deep .ui-growl {   
    position: fixed;
    bottom: 0;
    right: 0;
    border: 3px solid #73AD21;
}

（边框仅用于测试。） 这样做的效果是，growcontainer 本身会从顶部一直延伸到底部，并粘在右下角。消息咆哮容器内的实际消息咆哮仍然出现在容器的顶部。我的第二次尝试是将 css 规则应用于消息元素本身 .ui-growl-item 的 css 类。

这确实使实际的咆哮声停留在右下角，但它也有一个不幸的效果，即似乎删除了默认 .ui-growl-item 中的所有其他 css 样式规则，将咆哮声从绿色/红色变为几乎不可见。

我用粉红色箭头表示 css 类覆盖后的咆哮。您所看到的只是一些白色字母和错误十字符号的一部分。绿色块不是咆哮的一部分，而是背景的一部分。

是否有人知道我如何在咆哮声上实现所需的 css 规则，同时保持我不想更改的其他 css 规则？我想我在这里找到了默认文件https://searchcode.com/codesearch/view/2686100/，但我不知道我应该包含哪些默认 css 规则以防止它失去颜色。使事情复杂化的是颜色是有条件的，错误时变为红色，成功时变为绿色等。

编辑：

我尝试使用top 和left 来实现相同的目的，但这不是一个可行的选择，因为当消息内容很大时，它的一部分可能会从视口中消失。另一方面，小消息不会粘在底部。

Answer 1

简单，只需更改.ui-growl类的top属性即可。

默认情况下，类看起来像。

.ui-growl {
    top: 100px;
}

改成。或者添加新样式。

.ui-growl {
    top: 80vh !important;
}

调整顶部以适合您的位置。这里的vh 是视口高度，以占总视口的百分比计算。

更新：使用此样式覆盖

.ui-growl {
    top: auto;
    bottom: 0px;
}

希望这会有所帮助。 :)