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

Question

我对如何在使用 ConfirmDialog 时在 Angular 的 primeng 库中设置 2 'confirm' 和 'cancel' 按钮的样式感到困惑。

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

我想让 'confirm' 按钮保持绿色，并将 'cancel' 按钮的样式更改为红色。更改 css 中的样式：

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

更改两个按钮的颜色。有解决办法吗？

Answer 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 */
}

在尝试您提供的 link 中的演示时，按钮似乎在容器 div 中，其中包含 CSS class .ui-dialog-footer。但是，如果您的实现具有不同 container/namespace 中的按钮，您可以将 .ui-dialog-footer 替换为您需要的任何内容，以防止样式影响应用程序中的所有按钮。

这里 jsfiddle 演示了实际的功能。

希望对您有所帮助！

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

How do I style the confirmation buttons within primeng's ConfirmDialog modal?

css

confirm-dialog

primeng

angular