如何通過外部樣式表覆蓋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（每個最新版本）中嘗試過，但都無法正常工作。 如果我使用<h:outputStylesheet name="http://host.de/test.css">而不是<link> RES_NOT_FOUND得到RES_NOT_FOUND和狀態代碼404。

Answer 1

樣式表的<facet name="last"/>僅應在<h:head/>中使用，否則樣式表應以該樣式結束。 如果將它們最后加載到您的身體中，您會在ui的外觀上獲得怪異的表現。 在加載和構建頁面以及連接速度較慢或服務器繁忙時，將使用PF樣式表，加載完成后，您的自定義CSS會啟動。這可能會導致重排，顏色更改以及其他問題。

Answer 2

我知道了 解決方案是刪除周圍的<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>