您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何使用自定义样式覆盖默认的PrimeFaces CSS?

如何使用自定义样式覆盖默认的PrimeFaces CSS?

您需要考虑几件事,其中一项或多项可能与您的具体情况有关

您需要确保在PrimeFaces之后加载CSS 。您可以通过将<h:outputStylesheet>引用CSS文件<h:body>而不是放在其中来实现此目的<h:head>

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="style.css" />
    ...
</h:body>

JSF将自动将样式表重新定位到生成的HTML 的末尾,

你可能也看到建议把它<f:facet name="last">的<h:head>这是由PrimeFaces特定的理解HeadRenderer,但这是不必要的笨拙,当你有你自己会打破HeadRenderer。

了解CSS的特异性 您还需要确保CSS选择器至少与特定元素上的PrimeFaces认CSS选择器一样具体。您需要了解CSS特殊性以及级联和继承规则。例如,如果PrimeFaces认声明一个样式,如下所示

.ui-foo .ui-bar {
    color: pink;
}

然后您将其声明为

.ui-bar {
    color: purple;
}

并且特定的元素class=”ui-bar”恰好具有的父元素class=”ui-foo”,那么PrimeFaces的元素仍将优先,因为这是最具体的匹配!

您可以使用webbrowser开发人员工具查找确切的CSS选择器。在网络浏览器(IE9 / Chrome / Firefox + Firebug)中右键单击有问题的元素,然后选择“ 检查元素”以查看它。

如果您只需要为组件的特定实例而不是同一组件的所有实例覆盖样式,则添加一个自定义styleClass并在该钩子上进行钩挂。这是使用/应用特异性的另一种情况。例如:

<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
    border-style: none;
}

如果某个组件不支持a styleClass并且您使用的是jsf 2.2或更高版本,则还可以使用passtrough属性添加a pt:class并将其最终输出

<p:clock pt:class="borderless" />

切勿使用!重要 万一您无法正确地加载CSS文件,或者找不到正确的CSS选择器,您可能会抓住!important解决方法。这是错误的。这是一个丑陋的解决方法,而不是真正的解决方案。从长远来看,它只会使您的样式规则和您自己更加困惑。本!important应只以覆盖HTML元素的硬编码值被用来style从一个CSS样式表文件属性(这反过来也是一个不好的做法,但在某些罕见的情况下不幸的是不可避免的)。

CSS 2022/1/1 18:17:45 有487人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶