css - 如何在 Primefaces 5.3 中重新设置单个 View 的样式

Question

我有一个应用程序应该有一个大字体的特定 View 。为了到达那里，我决定创建一个新的 CSS 类并用它装饰面板组件，如下所示:

<p:panel styleClass="painel-grande">
    <div style="margin-bottom:20px">
        <p:outputLabel for="tipoRefeicao" value="#{messages['label.caixaSessao.tipoRefeicao']}" />
        <div>
        <p:selectOneMenu id="tipoRefeicao" value="#{caixaSessaoAbrirMB.bean.tipoRefeicao}">
            <f:selectItems value="#{caixaSessaoAbrirMB.tiposRefeicao}" var="t" itemLabel="#{t.descricao}" itemValue="#{t}" />
        </p:selectOneMenu>
        </div>
    </div>
    ...

painel-grande(大面板)类和一些相关样式在外部 CCS 文件中声明如下:

.painel-grande {
    font-size: 2em !important;
}

.painel-grande .ui-icon {
    height: 32px !important;
    width: 32px !important;
    margin-top: -10px !important;
}

我找到了一个 post上面写着不要使用 !important，但没有它就没有任何效果，所以我保留了它。有些事情确实有效，有些则没有。可以在下图中看到:

如您所见，按钮、标签和输入都没有问题，但组合(红色圆圈)有点奇怪。

我应该重新定义哪些其他样式以使其看起来正确？

提前致谢

Answer 1

尝试使用

zoom: 1.2

在 .ui-icon 类上。