Question

我已将自己的主题创建为单独的Maven项目，并且已正确加载。

现在我想改变组件的大小。例如，<p:orderList>。它有一个名为ui-orderlist-list的类，它在primefaces.css中定义，具有固定的200x200维度。无论我在theme.css中做什么，它都会被此属性覆盖，我无法将<p:orderList>的内容部分扩大。

对于其他组件，我可能只想覆盖组件的一个实例，而不是全部。

任何人都可以告诉我，我该怎么做？

Answer 1

您需要考虑几件事情，哪一个或多个可能与您的具体案例相关

在 PrimeFaces

之后加载CSS

您需要确保在 PrimeFaces之后加载CSS。您可以将<h:outputStylesheet>引用CSS文件放在<h:body>而不是<h:head>中来实现此目的：

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

JSF会自动将样式表重定位到生成的HTML <head>的 end ，这样可以确保在 PrimeFaces默认后加载样式表样式。这样，CSS文件中与PrimeFaces CSS文件中的选择器完全相同的选择器将优先于PrimeFaces文件。

您可能还会看到将其置于<f:facet name="last"> <h:head>中的建议，这是PrimeFaces特定的HeadRenderer所理解的，但这是不必要的笨拙，并且当您拥有拥有HeadRenderer。

了解CSS特异性

您还需要确保您的CSS选择器至少与特定元素上的PrimeFaces默认CSS选择器一样具体。您需要了解CSS Specificity和Cascading and Inheritance rules。例如，如果PrimeFaces默认声明一个样式，如下所示

.ui-foo .ui-bar { color: pink; }

并将其声明为

.ui-bar { color: purple; }

并且class="ui-bar"的特定元素碰巧有一个带有class="ui-foo"的父元素，那么PrimeFaces的元素仍会优先，因为这是最具体的匹配！

您可以使用webbrowser开发人员工具查找确切的CSS选择器。在webbrowser（IE9 / Chrome / Firefox + Firebug）中右键单击相关元素，然后选择 Inspect Element 进行查看。

部分覆盖

如果您只需要覆盖组件的特定实例的样式而不是同一组件的所有实例，则添加自定义styleClass并将其挂钩。这是使用/应用特异性的另一种情况。例如：

<p:dataTable styleClass="borderless">

.ui-datatable.borderless tbody, .ui-datatable.borderless th .ui-datatable.borderless td { border-style: none; }

如果某个组件不支持styleClass并且您使用的是jsf 2.2或更高版本，则还可以使用passtrough attributes并添加pt:class并使其在输出结束时结束

<p:clock pt:class="borderless" />

永远不要使用！important

如果您无法正确加载CSS文件或找到正确的CSS选择器，您可能会获得!important解决方法。这是简单的错误。这是一个丑陋的解决方法，而不是一个真正的解决方案。它只会长期混淆你的风格规则和你自己。 !important应仅用于覆盖CSS样式表文件中HTML元素的style属性中硬编码的值（这反过来也是一种不好的做法，但是在一些罕见的情况下，不幸的是不可避免）。

另见：

How to reference CSS / JS / image resource in Facelets template?

Mozilla Developer Network > CSS > Specificity（伟大的文章，必读！）

Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade

Answer 2

您可以创建一个新的css文件，例如cssOverrides.css

并将所需的所有覆盖放在其中，这样升级primefaces版本不会影响你，

并在你的h：head中添加类似的东西

<link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />

如果它不起作用，请尝试将其添加到h：body

为了检查它的工作是否在css文件中尝试这个简单的例子

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

这将减少所有primefaces组件/文本的大小

Answer 3

我正在使用PrimeFaces 6.0。以下是我希望了解的一些信息：

如果你使用<h:outputStylesheet/>，它会起作用，但即使它是<h:head></h:head>标签中的最后一个，你的CSS也不会被最后加载（之后将包含其他CSS文件）。我从here学到的一个技巧就是把它放在<f:facet name="last"></f:facet>，必须进入体内，如下所示：

<h:body>
  <f:facet name="last">
    <h:outputStylesheet name="css/MyCSS.css" />
  </f:facet>
...

然后你的CSS将是最后加载的。 注意：您仍然必须遵守BalusC概述的特异性规则。

我在WebContent / resources / css /.

中放置了“MyCSS.css”

有关资源加载顺序的更多信息：http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces

Answer 4

PrimeFaces / jQuery UI使用的样式可能非常复杂。元素可以从多个CSS规则接收其样式。很高兴知道您可以在DOM检查器的样式选项卡中使用过滤来搜索要自定义的属性：

此屏幕截图是使用Chrome制作的，但Firefox和Safari也提供了过滤功能。

找到要自定义的规则后，只需在html前加上前缀即可创建更具体的规则。例如，您可以覆盖.ui-corner-all，例如：

html .ui-corner-all {
  border-radius: 10px;
}

Answer 5

遵循已接受答案的相同想法但不使用

<块引用>

并且使用模板，我必须实现在 Primefaces 自己的之后但在页面的标题块中加载 .css 文件的目标。

template.xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    <h:head>
        <title><ui:insert name="title">TEST</ui:insert></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <ui:insert name="headcontent"></ui:insert>
    </h:head>
    <h:body>
        <div id="content">
            <ui:insert name="content"></ui:insert>
        </div>
        <div id="bottom">
            <ui:insert name="bottom"></ui:insert>
        </div>
    </h:body>
</html>

main.xhtml：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://xmlns.jcp.org/jsf/jstl/functions">

    <ui:define name="title">TEST</ui:define>
    <ui:define name="headcontent">
        <link type="text/css" rel="stylesheet" href="../resources/css/index.css"/>
    </ui:define>

    <ui:define name="content">
        ...
    </ui:define>
    
    <ui:define name="bottom">
        ...
    </ui:define>
</ui:composition>

这些是如何使用

插入源 .css 或 .scripts 文件的示例 <块引用>

和

<块引用>

因此，自定义 .css 或 .js 文件在 Primefaces 文件之后加载，如果您在浏览器中查看页面信息，您可以看到这些行被插入到页面标题块的末尾。< /p>

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

5 个答案:

在 PrimeFaces

了解CSS特异性

部分覆盖

永远不要使用！important

另见：