如何在primeng的ConfirmDialog模式中设置确认按钮的样式？

【问题标题】：How do I style the confirmation buttons within primeng's ConfirmDialog modal?如何在primeng的ConfirmDialog模式中设置确认按钮的样式？
【发布时间】：2017-12-22 04:58:48
【问题描述】：

在使用 ConfirmDialog 时，我对如何在 Angular 的primeng 库中设置 2 个“确认”和“取消”按钮的样式感到困惑。

参考：https://www.primefaces.org/primeng/#/confirmdialog

我想让“确认”按钮保持绿色，并将“取消”按钮的样式更改为红色。更改 css 中的样式：

.ui-widget-header .ui-button, .ui-widget-content .ui-button, .ui-button

改变两个按钮的颜色。有没有办法解决这个问题？

【问题讨论】：

标签： css angular primeng confirm-dialog

【解决方案1】：

您可以使用 CSS Adjacent Sibling Selector 来定位按钮，这假设只有两个按钮，确认和取消：

.ui-dialog-footer .ui-button {
    background: /* some green color */
}

.ui-dialog-footer .ui-button + .ui-button {
    background: /* some red color */
}

在您提供的链接中尝试演示时，这些按钮似乎位于 CSS 类 .ui-dialog-footer 的容器 div 中。但是，如果您的实现在不同的容器/命名空间中有按钮，您可以将 .ui-dialog-footer 替换为您需要的任何内容，以防止样式影响应用程序中的所有按钮。

这是一个 jsfiddle 演示实际功能。

希望对您有所帮助！

【讨论】：