清除primefaces样式

Posted 2023-02-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了清除primefaces样式相关的知识，希望对你有一定的参考价值。

参考技术A 我也遇到这个问题，想把原有样式去掉，添加新的自己定义的样式，请我怎么处理呢？

Primefaces 中全局更改的默认样式

【中文标题】Primefaces 中全局更改的默认样式【英文标题】：Globally changing default style in Primefaces 【发布时间】：2012-02-27 04:10:06 【问题描述】：

我应该如何在全局范围内更改并应用更改到 primefaces 的默认样式并且仅一次？

.ui-widget,.ui-widget .ui-widget 
    font-size: 90% !important;

目前，我将这个 CSS sn-p 嵌入到每个 XHTML 页面的头部。

<head>
    <style type="text/css">
        .ui-widget,.ui-widget .ui-widget 
            font-size: 90% !important;
        
    </style>
</head>

【问题讨论】：

您在项目中使用模板吗？或者您是否有标题页或任何其他页面，它们是您所有页面的一部分或包含它们？不，我没有使用模板，我可以有一个标题页来包含它，这是执行此操作的最佳方式吗？这就是我在我的项目中所做的，添加了类似的内容：在所有页面中出现的页眉页中... 【参考方案1】：

创建样式表文件：

/resources/css/default.css

.ui-widget, .ui-widget .ui-widget 
    font-size: 90%;

（请注意，我删除了 !important“hack”，另请参阅 How do I override default PrimeFaces CSS with custom styles?，了解如何重新定义 PF 样式的详细说明）

使用<h:outputStylesheet> 将其包含在模板的<h:body> 中（在所有PrimeFaces 自己的样式表之后，它将自动重新定位到HTML 头部的end）：

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

如果您没有使用主模板，因此需要在每个页面中包含它，我建议重新考虑您的页面设计并利用 JSF2 Facelets 模板功能。这样，您只有一个主模板文件，其中定义了头部和身体的所有默认值。另请参阅此答案以获取具体示例：How to include another XHTML in XHTML using JSF 2.0 Facelets?

【讨论】：

上面的 css 导致 selectOneMenu 在下拉菜单中显示水平滚动条，因为菜单本身的大小减小了，但每个菜单项仍然具有较大的字体。但是，当我删除逗号后的双 .ui-widget .ui-widget 时，下拉菜单似乎还可以。也许我需要复习一下我的 CSS，但我不明白重复的 .ui-widget .ui-widget 是什么意思。【参考方案2】：

我建议使用：

.ui-widget 
    font-size: 90%;
 
.ui-widget .ui-widget 
    font-size: 100%;

而不是 BalusC 的方法，除非您喜欢当您将 JSF 组件嵌套在一起时字体大小会减小。

我同意 BalusC 的观点，即您应该创建一个样式表并考虑模板化，但我不同意所建议的 CSS（尽管我还没有决定使用 !important！）。

Primefaces 3.1 user guide 的第 8.4 节建议使用

.ui-widget, .ui-widget .ui-widget 
    font-size: 90% !important;

类似于 BalusC 的建议，但使用 !important。

这将做两件事：

ui-widget

和

ui-widget

您真的要将嵌套ui-widget 的字体大小设置为 90% 吗？如果您有 2 或 3 层嵌套的 ui-widgets，字体大小将不断减小。试试下面的（Primefaces）JSF 标记，你就会明白我的意思了。

    <h:form>
        <p:button value="Normal"></p:button>
        <p:panel>
            <p:button value="A bit smaller"></p:button>
            <p:panel>
                <p:button value="Even smaller again"></p:button>
                <p:panel>
                    <p:button value="Tiny"></p:button>
                </p:panel>
            </p:panel>
        </p:panel>
    </h:form>

我相信标准 jQuery CSS 中需要.ui-widget .ui-widget 的原因是为了防止出现相反的问题：嵌套ui-widgets 中的字体大小增加。

默认样式通常如下：

.ui-widget  font-family: Verdana,Arial,sans-serif; font-size: 1.1em; 
.ui-widget .ui-widget  font-size: 1em;

如果没有为.ui-widget .ui-widget 定义的样式，则应用于.ui-widget 的默认font-size: 1.1em 样式会导致嵌套ui-widgets 中的字体大小增加。

通过添加更具体的 .ui-widget .ui-widget 选择器并将字体大小设置为 100%（或 1em），您将确保获得一致的字体大小，无论您将组件嵌套多深。

【讨论】：

我有一点疑问，如果我输入<p:dataTable>，而不是<p:button value="Normal"></p:button>，组件大小似乎没有调整大小。可能是什么原因？此外，如何将字体类型更改为 ariel 或 sans 等？还是我需要明确提及.ui-datatable？感谢猎犬。我很少不同意 BalusC 的答案，但你的答案很准确，并且准确地解决了我自从开始使用 PF 以来一直遇到的问题（很好地解释了为什么它也是一个问题）。 @wobblycogs 谢谢 - 我认为这是我唯一一次质疑 BalusC 的答案（这让我怀疑自己！） - 他的 JSF 知识令人难以置信，而且 Omnifaces 很简洁。 @HoundDog 你知道我该怎么做才能减少所有primefaces组件的大小，而不仅仅是字体。谢谢 @BalusC，你怎么看？我遇到了猎犬用你的方法描述的问题。【参考方案3】：

它适用于以下 css

body 
    font-size: 75% !important;



.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: 100% !important;

【讨论】：

【参考方案4】：

这很好用。

.ui-g 
    font-size: 13px;

【讨论】：

以上是关于清除primefaces样式的主要内容，如果未能解决你的问题，请参考以下文章

如何将样式应用于 PrimeFaces 数据表？

如何使用自定义样式覆盖默认的 PrimeFaces CSS？

PrimeFaces Datatable 不显示任何样式

PrimeFaces自动完成多种样式但具有Multiple = false

当发送的请求是 Ajax 请求时，如何从 ManagedBean 重定向？

如何使用 PrimeFaces 在 JSF 上重定向？