将 CSS 类或样式添加到 p:message答案

【问题标题】：Adding CSS class or style to p:message将 CSS 类或样式添加到 p:message
【发布时间】：2014-03-07 10:49:24
【问题描述】：

我有单个 p:message，我想为其设置display: inline-block。

我尝试了以下方法：

<p:message ... styleClass="inline-block" style="display:inline-block;/>

但是当我看到源代码时，样式和类都不会在带有消息的 div 上呈现。

有没有办法直接为p:message指定自定义CSS属性？

我知道我可以用 div 包装它并控制该 div 子级的 CSS，但如果可能的话，我想避免多余的包装。

PrimeFaces 版本：3.5。

【问题讨论】：

【解决方案1】：

不得不不同意 Hatem Alimam

正如mykong article 所说，您应该添加样式表以覆盖 Primefaces CSS。

!important 在 CSS 样式表中被视为不好的做法。查看这些快速 SO 答案，了解 SO 社区的想法：

最后一个有一个为!important辩护的答案，但是当几个!important规则发挥作用时就会出现问题（如果你毫无保留地开始使用它，你一定会被它吹到你的脸上他们开始一个接一个地级联。

正确的做法是让你的样式表优先于 PF 表，让你的选择器在级联中优先于 PF 中的选择器。

Google for CSS selector Specificity 详细了解如何确保浏览器选择您的规则而不是 PF 规则（我现在在工作，无法访问博客）。

关于您的具体问题：

属性不起作用，因为它们没有在组件中编码。检查您的特定 PF 版本的 PF 用户指南（在撰写本文时，您尚未说明您的版本）。 <p:messages> 组件有一种相当奇特的渲染方式。

针对您的特定情况，添加以下规则：

.ui-messages.ui-widget {
    display: inline-block;
}

【讨论】：