如何将 CSS 添加到 PrimeFaces？答案

【问题标题】：How to add a css to PrimeFaces?如何将 CSS 添加到 PrimeFaces？
【发布时间】：2015-07-19 00:20:08
【问题描述】：

我尝试将 css 添加到 PrimeFaces 并覆盖默认组件字体大小。

我的default.css：

.body {
    font-size: 10%;
}

.ui-widget,.ui-widget-header,.ui-widget-content,.ui-widget-header .ui-widget-header,.ui-widget-content .ui-widget-content,.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
    {
    font-size: 10%;
}

.button{   
    font-size: 10%;
}

.ui-widget.button{
    font-size: 10%;   
}

关于 xml 正文：

<h:outputStylesheet library="css" name="default.css" />

例如，我尝试向按钮添加新的 css：

<p:commandButton styleClass="button" id="add" value="Add" ajax="false"/>

我做错了什么，没有看到任何效果。

【问题讨论】：

检查css是否加载，检查生成的html如果你的选择器是specific enough（使用浏览器开发工具）
还要检查样式表的加载顺序是否正确
尝试使用
@Eiten，你的 default.css 在哪里？尝试使用简单的 css 标签包含它。
这个改变有帮助，但我不知道为什么： CSS 位于文件夹中CSS。

标签： css jsf primefaces

【解决方案1】：

尝试从以下位置删除,：

.ui-widget,.ui-widget-header,.ui-widget-content,.ui-widget-header .ui-widget-header,.ui-widget-content .ui-widget-content,.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button
    {
    font-size: 10%;
}

用这个替换它：

.ui-widget .ui-widget-header .ui-widget-content .ui-widget-header .ui-widget-header .ui-widget-content .ui-widget-content .ui-widget input .ui-widget select .ui-widget textarea .ui-widget button
    {
    font-size: 10%;
}

【讨论】：

【解决方案2】：

在 Primefaces 中，您可以创建自己的主题来定义组件布局。您可以复制和更改社区主题或使用Theme Roller 创建自己的主题。

documentation/User Guides 中详细解释了所有步骤。

【讨论】：

这是一种复杂的解决方案，只需更改字体大小并且您希望保留 PF 主题中的所有其他内容