如何通过外部样式表覆盖 PrimeFaces CSS

Question

我的 xhtml 页面上有以下代码来覆盖默认的 PrimeFaces 样式：

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

当我使用存储在本地服务器上的样式表时，这很好用。问题是，我想包含一个外部（动态）样式表。因此，当我将 <h:facet> 更改为如下所示时，它不再起作用了。

  <f:facet name="last">
    <link type="text/css" rel="stylesheet" href="http://host.de/main.css" />
  </f:facet>

如果我将 <link> 元素直接包含到我的 xhtml 页面的 <h:head> 部分中，则会加载样式表，但规则会被 PrimeFaces 覆盖。

在下一步中，我想将我的 ManagedBean 中的 href 属性动态设置为如下所示：

<link type="text/css" rel="stylesheet" href="#{bean.cssUrl}" />

这可能吗？还是有另一种方法来实现我所描述的？任何帮助表示赞赏。提前致谢。

编辑：

我在 Internet Explorer、Firefox 和 Chrome（每个最新版本）中尝试过，none 可以正常工作。如果我使用 <h:outputStylesheet name="http://host.de/test.css"> 而不是 <link> 我会得到 RES_NOT_FOUND 和状态代码 404.

Answer 1

我成功了。解决办法是去掉周围的<f:facet>元素，直接把<link>放在<h:body>下面：

<h:body>
  <link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
  ...
</h:body>

使用此解决方案，我还可以在 ManagedBean 的 @PostConstruct 方法中动态设置外部样式表的 URL（范围是 @ViewScoped）。

编辑：

它可能有效，但@Kukeltje 的回答更清晰、更准确。我用错了<f:facet name="last">。

更新的代码片段：

<h:head>
    <f:facet name="last">
        <link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
    </f:facet>
</h:head>

Answer 2

样式表的

<facet name="last"/> 应该只用在 <h:head/> 中，那是您的样式表无论如何都应该结束的地方。如果最后将它们装入体内，您的 ui 的外观和感觉可能会出现奇怪的表现。在加载和构建页面时，连接速度较慢或服务器繁忙时，会使用 PF 样式表，加载完成后，您的自定义 css 开始运行。这可能会导致回流、颜色变化等还有什么

如何通过外部样式表覆盖 PrimeFaces CSS

How to override PrimeFaces CSS via external stylesheet

html

css

jsf

el

primefaces