Как мне оформить кнопки подтверждения в модале ConfirmDialog в primeng?

Question

Я запутался в том, как делать стилизацию 2-х кнопок "подтвердить" и "отменить" в библиотеке primeng Angular при использовании ConfirmDialog.

ссылка: https://www.primefaces.org/primeng/

Я хочу, чтобы кнопка "Подтвердить" оставалась зеленой, а стиль "Отмена" - красной. Изменение стиля в CSS для:

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

меняет цвета на обеих кнопках. Это можно обойти?

Answer 1

Вы можете использовать селектор смежных братьев и сестер CSS для нацеливания на кнопки, это предполагает, что будет только две кнопки, подтвердить и отменить:

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

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

Кнопки кажутся в контейнере div с классом CSS .ui-dialog-footer при попытке попробовать демо в ссылке, которую вы предоставили. Однако, если ваша реализация имеет кнопки в другом контейнере / пространстве имен, вы можете заменить .ui-dialog-footer с тем, что вам нужно, чтобы предотвратить влияние стилей на ВСЕ кнопки в вашем приложении.

Вот jsfiddle, демонстрирующий функциональность в действии.

Надеюсь, это поможет!