p:commandButton 圆形按钮等样式类不起作用

Question

我尝试应用 prime faces 演示中提供的样式，但无法获得结果。我试过的代码如下

    <h:head>
        <title>Facelet Title</title>
        <style type="text/css">
            button.ui-button {
                margin-right: .5rem;
            }
        </style>
    </h:head>
    <h:body>
    <div class="card">
        <h5>Basic</h5>
        <p:commandButton type="button" value="Submit" />

        <h5>Icons</h5>
        <p:commandButton type="button" icon="pi pi-check" />

        <h5>Severities</h5>
        <p:commandButton type="button" value="Primary" />
        <p:commandButton type="button" value="Secondary" styleClass="ui-button-secondary" />

        <h5>Raised Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="ui-button-raised" />

        <h5>Rounded Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="rounded-button" />

        <h5>Flat Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="ui-button-flat" />

        <h5>Raised Text Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="ui-button-raised ui-button-flat" />

        <h5>Outlined Buttons</h5>
        <p:commandButton type="button" value="Primary" styleClass="ui-button-outlined" />

        <h5>Rounded Icon Buttons</h5>
        <p:commandButton type="button" icon="pi pi-bookmark" styleClass="rounded-button ui-button-secondary" />

        <h5>Rounded Text Icon Buttons</h5>
        <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-flat" />

        <h5>Rounded and Outlined Icon Buttons</h5>
        <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-outlined" />
    </div>

但没有按要求显示结果。

请指导我必须添加什么样式表。

Answer 1

这些按钮类是在 PrimeFaces 10 中引入的。如果您不是该版本，或者您没有升级您的高级主题，它们将无法使用。

因此，如果您不想添加自定义 CSS，请升级，或者为您想要在项目中支持的类添加自定义 CSS。例如，对于 rounded-button 你想将它添加到你的自定义样式 sheet:

body .ui-button.rounded-button {
    border-radius: 2rem;
}

另请参阅：

How do I override default PrimeFaces CSS with custom styles?

p:commandButton 圆形按钮等样式类不起作用

p:commandButton styleClasses like rounded-button are not working

jsf

primefaces