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

样式表的

<facet name="last"/>只应在<h:head/>中使用，而DataGridViewColumn column = dataGridView.Columns[Index]; column.AutoSizeMode = DataGridViewAutoSizeColumnMode.AllCells;应该是样式表应该最终结束的地方。如果你最后将它们装入你的身体，你可以在你的ui的外观和感觉上得到奇怪的表现。在加载和构建页面并使用较慢的连接或繁忙的服务器时，使用PF样式表，当完成加载时，您的自定义css会启动。这可能会导致重排，颜色变化等等更多

Answer 2

我得到了它的工作。解决方案是删除周围的<f:facet>元素并直接将<link>放在<h:body>下：

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

使用此解决方案，我还可以在@PostConstruct的{{1}}方法中动态设置外部样式表的网址（范围为ManagedBean）。

修改

它可能有效，但@ Kukeltje的答案更清晰，更准确。我使用@ViewScoped错了。

更新了代码段：

<f:facet name="last">

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

2 个答案: