如何让PrimeFaces p:rowEditor样式与p:commandButton一致（v13.07）

核心方案 #

不改动RowEditor原生编辑逻辑，通过自定义CSS将其样式调整为与CommandButton一致，保留原有编辑、保存、取消功能。

具体实现 #

1. 添加自定义CSS样式 #

在页面的<h:head>标签内或单独的CSS文件中插入以下代码，覆盖RowEditor默认样式以匹配PrimeFaces 13的CommandButton外观：

/* 调整RowEditor容器布局，对齐按钮间距 */
.ui-row-editor {
    display: inline-flex;
    gap: 0.5em;
}

/* 统一RowEditor按钮基础样式 */
.ui-row-editor .ui-row-editor-edit,
.ui-row-editor .ui-row-editor-save,
.ui-row-editor .ui-row-editor-cancel {
    border: none;
    background: transparent;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    cursor: pointer;
}

/* 按钮hover状态匹配CommandButton */
.ui-row-editor .ui-row-editor-edit:hover,
.ui-row-editor .ui-row-editor-save:hover,
.ui-row-editor .ui-row-editor-cancel:hover {
    background-color: #e9ecef;
}

/* 图标大小与颜色对齐 */
.ui-row-editor .pi {
    font-size: 1.25rem;
    color: #495057;
}

/* 保存按钮风格匹配primary按钮 */
.ui-row-editor .ui-row-editor-save .pi {
    color: #0d6efd;
}

.ui-row-editor .ui-row-editor-save:hover {
    background-color: #cce5ff;
}

/* 取消按钮风格匹配secondary按钮 */
.ui-row-editor .ui-row-editor-cancel .pi {
    color: #6c757d;
}

.ui-row-editor .ui-row-editor-cancel:hover {
    background-color: #f8f9fa;
}

2. 页面代码优化（可选） #

若希望组件布局更紧凑，可将RowEditor与CommandButton放在同一列：

<p:column exportable="false" ariaHeaderText="操作" style="width: 4rem;">
    <p:rowEditor editTitle="编辑行" cancelTitle="取消编辑" saveTitle="保存行"/>
    <p:commandButton action="#{...}" 
                     icon="pi pi-trash" 
                     style="margin-left:.5em;"
                     process="@this"
                     id="deleteEntryButton">
        <f:setPropertyActionListener value="#{...}" target="#{...}"/>
        <p:confirm icon="pi pi-exclamation-triangle" />
    </p:commandButton>
</p:column>

3. 注意事项 #

• 上述样式基于PrimeFaces 13默认主题（Saga）适配，若使用自定义主题，需微调颜色、间距等参数。
• 无需重写编辑逻辑，RowEditor原生的开启编辑、保存、取消功能完全保留，仅修改外观。
• 嵌套RowEditor到CommandButton不可行，因为RowEditor内部已封装独立的按钮交互逻辑，CSS覆盖是最安全的适配方式。

内容的提问来源于stack exchange，提问作者Joe