html - 如何通过外部样式表覆盖 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>元素直接进入<h:head>我的 xhtml 页面部分加载了样式表，但规则被 PrimeFaces 覆盖。

在下一步中，我想设置 href来 self 的动态属性 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

<facet name="last"/> for 样式表应该只用于 <h:head/>无论如何，这就是您的样式表应该结束的地方。如果最后将它们加载到 body 中，您的用户界面的外观和感觉可能会出现奇怪的表现。在加载和构建页面并遇到较慢的连接或繁忙的服务器时，会使用 PF 样式表，加载完成后，您的自定义 CSS 就会启动。这可能会导致回流、颜色变化等等