css - 应用 Primefaces 样式而不是

Question

我正在使用日历和自动完成功能的屏幕上使用 primefaces

我从设计师那里得到了 UI 并开始集成，我分配了这样的样式

<p:calendar styleClass="xyz" />

输出是

<span id="bla" class="xyz" >
    <input type="text" class="some other classes here" />
</span>

所以我的风格都失败了

现在我需要直接在输入上应用样式而不是跨度

Answer 1

你能通过重新排列你的 CSS 来解决它吗？：

.xyz input {
/* some weird styling here */
}

Answer 2

例如，如果您依赖 Bootstrap CSS，这是有问题的。表单控件需要 class form-control，但是当您添加styleClass="form-control"for时p:calendar，周围的 span 会获取 class 而不是输入，这完全与设计相混淆。我认为标签应该有一个inputStyleClass属性，就像.p:calendartableStyleClassp:dataTable

Answer 3

这对我使用 jQuery 将表单控件类添加到输入字段有用：

$(".mycalendar input:first-child").addClass("form-control");

p:calendar id="date1" value="#{bean.date1}" styleClass="mycalendar" />

Answer 4

如果您使用材料设计，则可以使用此技巧：

:host /deep/ .ui-inputtext{
   /* Your Crazy Custom Style*/
}