Question

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

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

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

.ui-widget-header .ui-button，.ui-widget-content .ui-button，.ui-button

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

Answer 1

You could use the CSS Adjacent Sibling Selector to target the buttons, this assumes there will only be two buttons, the confirm and cancel:

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

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

The buttons seem to be in a container div with CSS class .ui-dialog-footer when trying the demo in the link you provided. However if your implementation has the buttons in a different container/namespace, you can replace .ui-dialog-footer with whatever you'd need to prevent the styles from affecting ALL buttons in your application.

Here is a jsfiddle demonstrating the functionality in action.

Hopefully that helps!

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

1 个答案: