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

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

现在我想更改组件的大小。例如，a。它有一个名为ui orderlist list的类，该类在primefaces.css中定义，具有固定的200x200维度。无论我在theme.css中做了什么，它都会被这个属性覆盖，并且我无法使内容部分更广泛

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

---

有人能告诉我怎么做吗？

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

并将所有您想要的覆盖放置在其中，这样升级primefaces版本不会影响您

在你的h:头上加上这样的东西

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

---

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

您需要考虑几件事，其中一件或多件可能与您的具体情况相关

在一次之后加载CSS 你需要确保你的CSS是在PrimeFaces之后加载的。您可以通过将引用CSS文件放置在内部而不是：

你宣布它为

.ui-bar {
    color: purple;
}

而class=ui bar的特定元素恰好有class=ui foo的父元素，那么PrimeFaces的元素仍然会获得优先权，因为这是最具体的匹配

您可以使用webbrowser开发人员工具找到确切的CSS选择器。右键单击webbrowser IE9/Chrome/Firefox+Firebug中有问题的元素，然后选择Inspect element查看它

部分覆盖 如果您只需要覆盖组件的特定实例的样式，而不是同一组件的所有实例，那么可以添加一个自定义样式类，并钩住它。这是使用/应用特异性的另一种情况。例如：

<p:dataTable styleClass="borderless">

如果一个组件不支持styleClass，而您使用的是JSF2.2或更高版本，那么您还可以使用并添加一个pt:class，并将其放在输出端

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

永远不要使用！重要的 如果您未能按顺序正确加载CSS文件，或者无法找到正确的CSS选择器，那么您可能会抓到！重要的变通方法。这显然是错误的。这是一个丑陋的解决办法，不是真正的解决办法。从长远来看，这只会让你的风格规则和你自己更加混乱。这个“重要信息”仅用于覆盖CSS样式表文件中HTML元素的style属性中硬编码的值，这也是一种不好的做法，但在某些罕见的情况下，不幸的是不可避免

另见： 好文章，必读！

---

我使用的是PrimeFaces6.0。以下是一些我想知道的关于这方面的信息：

如果您使用，它会工作，但您的CSS不会最后加载，即使它是标签中的最后一个，其他CSS文件也会随后被包括在内。我从中学到的一个诀窍是把它放在里面，必须放在身体里面，就像这样：

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

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

我将MyCSS.css放在WebContent/resources/css/中

有关资源加载顺序的更多信息：

在PrimeFaces之后加载CSS？ 虽然在PrimeFaces CSS之后加载CSS将覆盖现有规则，但我认为这不是一个好主意。最好创建更具体的规则。无论顺序如何，更具体的规则总是会赢。例如，如果您将组合资源处理程序与PrimeFaces扩展结合使用，则切换的PrimeFaces主题将最后加载，使其以相同的规则获胜

如何创建更具体的规则 PrimeFaces使用的样式规则可能非常复杂。一个元素可以从多个CSS规则接收其样式。很高兴知道您可以使用DOM inspector的“样式”选项卡中的筛选来搜索要自定义的属性：

此屏幕截图是使用Chrome拍摄的，但Firefox和Safari中也提供了过滤功能

找到要自定义的规则后，只需使用html作为前缀创建更具体的规则即可。例如，您可以覆盖.ui角，如下所示：

使用样式属性 PrimeFaces组件可以呈现非常复杂的HTML。通常，“样式”属性仅应用于组件呈现的最外层HTML节点。而且，样式是不可重用的，所以最好设置一个样式类，并根据您设置的类创建CSS规则。这还允许您设置组件呈现的内部HTML节点的样式

使用styleClass属性 PrimeFaces附带了主题和模板，其中包含许多内置类。您可能会发现现有的类已经完成了您想要的定制。例如，要从p:panelGrid中删除边框，可以简单地应用类ui。或者是我们最近添加到PrimeFaces 10中的类 按钮，如ui按钮警告

见：

使用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主题的强调色，请参见

有关资源处理程序的详细信息，请参阅：

---

一个很好的技巧是在PrimeFaces选择器前面加上html前缀，以使它们更具体。如何根据元素ID（如p:dialog ID=myDialog）修改CSS？我已经用它创建了自己的CSS样式表，并添加了针对该ID的样式，但它看起来不起作用。使用PF v5.3Using的Web应用程序！从外部库（如Primefaces或Bootstrap）重写外部CSS很重要，这是一种不错的做法。请阅读你提到的文章。@Luis:也许你错过了这个部分！“重要信息”仅用于覆盖答案中的CSS样式表文件中HTML元素的style属性中硬编码的值。

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

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

@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));
}

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