Я хотел переопределить внешний вид .ui-menubar
- однако, все, что я помещаю в свой default.css, не принимает, потому что оно переопределяется компонентами Primefaces component.css, которые каким-то образом идут после него.
Я попытался изменить порядок, используя фасеты следующим образом:
<h:head>
<f:facet name="first">
<title>Report Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</f:facet>
<f:facet name="last">
<h:outputStylesheet name="css/default.css"/>
</f:facet>
</h:head>
Обратите внимание, что этот раздел является частью шаблона.
Что выглядит следующим образом:
<head id="j_idt2">
<title>Report Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="/my-web/javax.faces.resource/theme.css.xhtml?ln=primefaces-redmond">
<link type="text/css" rel="stylesheet" href="/my-web/javax.faces.resource/css/default.css.xhtml">
<link type="text/css" rel="stylesheet" href="/my-web/javax.faces.resource/components.css.xhtml?ln=primefaces&v=6.2">
[javascript resources omitted for brevity ...]
</head>
Я использовал последние Primefaces, которые были на момент написания 6.2.
Рендеринг вывода, ясно показывает components.css
после моего пользовательского default.css
.
Как это можно правильно заказать?
Обратите внимание, что я могу корректно переопределить стиль, если не буду использовать <h:outputStylesheet>
, например:
<f:facet name="last">
<style>
.ui-menubar {
padding: 0px;
margin: 0px;
}
</style>
</f:facet>
Это мой обходной путь, но я считаю, что неправильный дизайн - это жесткое кодирование на моей странице, а не CSS.
Обратите внимание, что есть несколько других подобных публикаций, но я должен подчеркнуть, что я DO использую и хочу использовать правильное упорядочение вывода <h:outputStylesheet>
, а не какой-то другой обходной путь с использованием встроенных стилей и т. Д. Также я пока не могу найти дубликат публикации с рабочим ответом, хотя я продолжаю исследовать.
Также обратите внимание, что PrimeFaces документирует использование <f:facets>
в теге <h:head>
очень четко:
PrimeFaces имеет собственный HeadRenderer, реализующий следующий порядок:
- «первый» фасет, если он определен
- Тема CSS
- «средний» фасет, если он определен
- PF-JSF зарегистрированы CSS и JS
- Содержание заголовка
- «последний» фасет, если он определен
Это означает последний аспект после чего-либо еще .