PrimeFaces 咆哮动态改变颜色

有没有办法动态更改 PrimeFaces 咆哮组件的背景？ 我希望能够在出现错误时显示红色背景，在成功时显示绿色背景。

提前致谢。

仅当您一次仅向上下文添加一条消息时，上述解决方案才有效。如果您添加多条消息，则所有咆哮项目都将根据最后一条消息的严重性进行着色。请点击下面的链接了解有关该问题的更多详细信息。

（土耳其语内容，您可能需要翻译）
动态更改 PrimeFaces 咆哮背景颜色

为了解决这个问题，您应该按图标样式查找咆哮项（PrimeFaces 仅更改不同严重级别的咆哮图标），并将自定义样式表类添加到咆哮图标的 html 元素的祖父母中，以实现不同的背景颜色。

首先定义下面的脚本（它将自定义 css 类添加到祖父母）：

<script>
   function init () { 
      $(".ui-growl-image-info").parent().parent().addClass("g-info");
      $(".ui-growl-image-warn").parent().parent().addClass("g-warn");
      $(".ui-growl-image-error").parent().parent().addClass("g-error");
      $(".ui-growl-image-fatal").parent().parent().addClass("g-fatal");
   }
</script>

并将以下样式定义添加到您的页面：

<style>
    div[id="growlForm:growl_container"] > div[class~="g-fatal"] {
    background-color: black !important;
    }

    div[id="growlForm:growl_container"] > div[class~="g-error"] {
    background-color: red !important;
    }

    div[id="growlForm:growl_container"] > div[class~="g-warn"]{
    background-color: orange !important;
    }

    div[id="growlForm:growl_container"] > div[class~="g-info"]{
    background-color: green !important;
    }

    .ui-growl-image-info ~ .ui-growl-message {
    color:#fff;
    }
    .ui-growl-image-error ~ .ui-growl-message {
    color:#fff;
    }
    .ui-growl-image-warn ~ .ui-growl-message {
    color:#fff;
    }
    .ui-growl-image-fatal ~ .ui-growl-message {
    color:#fff;
    }
 </style>

最后，附上init()将消息添加到上下文的元素的方法。

<p:commandButton value="Show" actionListener="#{someBean.someMethod}" oncomplete="init();"/>

结果是:)

项目源代码

希望这对任何人都有帮助。