如何通过外部样式表覆盖 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 会覆盖规则。

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

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

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

编辑：

我在 Internet Explorer、Firefox 和 Chrome（每个最新版本）中进行了尝试，但都没有工作。如果我使用 <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">。

更新代码sn-p：

<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"/> for stylesheets 应该只用在<h:head/> 那是你的样式表应该结束的地方。如果你最后将它们加载到你的身体中，你会在你的 ui 的外观和感觉上得到奇怪的表现。在加载和构建页面并有一些较慢的连接或繁忙的服务器时，使用 PF 样式表，完成加载后，您的自定义 css 会启动。这可能会导致回流、颜色变化等等