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

rdlzhqv9 于 2023-02-01 发布在其他

关注(0)|答案(5)|浏览(146)

我想更改一个PrimeFaces组件的大小。例如，一个<p:orderList>。它有一个名为ui-orderlist-list的类，该类在primefaces.css中定义，具有固定的200x200维度。无论我在theme.css中做什么，它都会被此属性覆盖，并且我无法使<p:orderList>的内容部分更宽。
对于其他组件，我可能只想覆盖组件的一个示例，而不是所有示例。
有谁能告诉我我该怎么做？

css

来源：https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles

5条答案

按热度按时间

oknwwptz1#

有几件事你需要考虑其中一个或多个可能是相关的你你的具体情况

在 * PrimeFaces之后 * 加载CSS

你需要确保你的CSS是在PrimeFaces之后加载的，你可以通过把引用你的CSS文件的<h:outputStylesheet>放在<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中的选择器。
您可能还会看到将其放在<h:head>的<f:facet name="last">中的建议，这是由特定于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的元素仍然会获得优先级，因为这是最具体的匹配!
您可以使用网页浏览器开发者工具来找到确切的CSS选择器。在网页浏览器（IE9/Chrome/Firefox + Firebug）中右键单击有问题的元素，然后选择 * 检查元素 * 来查看它。

部分覆盖

如果你只需要覆盖组件的一个特定示例的样式，而不是同一个组件的所有示例，那么就添加一个定制的styleClass，并将其挂钩。这是使用/应用特定性的另一种情况。例如：
一个三个三个一个
如果一个组件不支持styleClass，而您使用的是jsf 2.2或更高版本，那么您也可以使用passtrough attributes并添加一个pt:class，使其最终出现在输出端。

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

切勿使用!重要

如果您未能正确加载CSS文件或未能找到正确的CSS选择器，你可能会找到!important的解决方法。这是完全错误的。这是一个丑陋的解决方法，不是一个真正的解决方案。从长远来看，它只会让你的样式规则和你自己更加困惑。!important应该 * 只 * 用于覆盖HTML元素中硬编码的值。s 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

赞(0）回复(0）举报 2023-02-01

jbose2ul2#

可以创建新的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;
}

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

赞(0）回复(0）举报 2023-02-01

9vw9lbht3#

我使用的是PrimeFaces 6.0。以下是我希望了解的一些相关信息：
如果你使用<h:outputStylesheet/>，它可以工作，但是你的CSS不会被最后加载，即使它是<h:head></h:head>标签中的最后一个（其他的CSS文件将随后被包含）。我从here学到的一个技巧是把它放在<f:facet name="last"></f:facet>中，它必须放在body中，如下所示：

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

那么您的CSS将是最后加载的。**注意：**您仍然必须遵守BalusC概述的特定性规则。
我把“MyCSS.css”放在了WebContent/resources/css/中。
有关资源装入顺序的详细信息：http://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces

赞(0）回复(0）举报 2023-02-01

mwngjboj4#

在PrimeFaces之后加载CSS？

虽然在PrimeFaces CSS之后加载CSS会覆盖现有的规则，但我不认为这是个好主意。最好创建更具体的规则。更具体的规则总是"获胜"，不管顺序是什么。例如，如果您将使用一个组合资源处理程序与PrimeFaces扩展LightSwitch组合，则切换后的PrimeFaces主题将最后加载。让它以平等的规则"获胜"!

如何创建更具体的规则

PrimeFaces使用的样式规则可能相当复杂。一个元素可以从多个CSS规则中获得样式。很高兴知道您可以使用DOM检查器的样式选项卡中的过滤功能来搜索您想要自定义的属性：

此屏幕截图是使用Chrome拍摄的，但Firefox和Safari也提供过滤功能。
找到要自定义的规则后，只需在其前面加上html，即可创建更具体的规则。例如，可以覆盖.ui-corner-all，如下所示：

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

使用`style`属性

PrimeFaces组件可以呈现相当复杂的HTML。通常，style属性仅应用于组件呈现的最外层HTML节点。此外，style不可重用，因此最好设置styleClass并基于您设置的类创建CSS规则。这还允许您设置组件呈现的内部HTML节点的样式。

使用`styleClass`属性

PrimeFaces自带的主题（和模板）有很多内置的类。你可能会发现一个现有的类已经完成了你想要的定制。例如，要从p:panelGrid中删除边框，你可以简单地应用ui-noborder类。或者我们最近添加到PrimeFaces 10中的类来设计按钮，比如ui-button-warning。
参见：

覆盖组件的单个示例

如果你想覆盖一个示例的样式，使用styleClass属性添加一个CSS类到那个示例中。现在你可以使用你在CSS选择器中添加的CSS类来创建样式。

使用`ResourceHandler`替换主题值

我通常只是想用另一个值替换一些颜色。由于颜色可以在许多不同的规则中使用，因此创建一个ResourceHandler可能很有用。
在处理程序中检查PrimeFaces主题：

@Override
public Resource createResource(String resourceName,
                               String libraryName) {
  if (isPrimeFacesTheme(resourceName, libraryName)) {
    return new MyResource(super.createResource(resourceName, libraryName), this);
  }
  else {
    return getWrapped().createResource(resourceName, libraryName);
  }
}

protected boolean isPrimeFacesTheme(final String resourceName,
                                    final String libraryName) {
  return libraryName != null
                 && libraryName.startsWith("primefaces-")
                 && "theme.css".equals(resourceName);
}

在资源中，替换颜色：

private static String cache;

public MyResource(Resource wrapped, ResourceHandler handler) {
  this.wrapped = wrapped;
  this.handler = handler;
  this.charset = Charset.forName(FacesContext.getCurrentInstance().getExternalContext().getRequestCharacterEncoding());
}

@Override
public InputStream getInputStream() throws IOException {
  if (cache == null) {
    cache = readInputStream(getWrapped().getInputStream());
    // Replace values
    cache = cache.replace("#007ad9", "#11dd99");
  }
  return new ByteArrayInputStream(cache.getBytes(charset));
}

并在faces-config. xml中注册它，如下所示：

<application>
  <resource-handler>com.example.MyResourceHandler</resource-handler>
</application>

PrimeFaces Extension 10.0.1中提供了一个资源处理程序，可以用CSS变量替换Arya、Saga和Vela主题的强调色，请参见https://www.primefaces.org/showcase-ext/sections/utils/themeAccentColorResourceHandler.jsf。
有关资源处理程序的详细信息，请参阅：

How to load dynamic resources in JSF?

赞(0）回复(0）举报 2023-02-01

g52tjvyc5#

遵循与已接受答案相同的思路，但不使用
<h:outputStylesheet>
和使用模板，我必须达到的目标，加载的.css文件后，自己的primeface，但在标题块的网页。

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文件的示例
ui:insert
以及
ui:define
因此，自定义的.css或.js文件在Primeface文件之后加载，如果您在浏览器中查看页面信息，您可以看到这些行插入在页面标题块的末尾。

赞(0）回复(0）举报 2023-02-01

我来回答

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

5条答案

在 * PrimeFaces之后 * 加载CSS

了解CSS特性

部分覆盖

切勿使用!重要

另请参见：

在PrimeFaces之后加载CSS？

如何创建更具体的规则

使用`style`属性

使用`styleClass`属性

覆盖组件的单个示例

使用`ResourceHandler`替换主题值

相关问题

热门标签

最新问答

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

5条答案

在 * PrimeFaces之后 * 加载CSS

了解CSS特性

部分覆盖

切勿使用!重要

另请参见：

在PrimeFaces之后加载CSS？

如何创建更具体的规则

使用style属性

使用styleClass属性

覆盖组件的单个示例

使用ResourceHandler替换主题值

相关问题

热门标签

最新问答

使用`style`属性

使用`styleClass`属性

使用`ResourceHandler`替换主题值