Search code examples
cssangularsassprimeng

Primeng angular dialog

I am trying to override the style of prime-ng angular p-dialog-content. But to no avail. It is also styled in global CSS of the project. So maybe that's another reason why it doesn't work. When I remove the class popup from the CSS, then it works.

This is the last approach:

.popup {
    ::ng-deep .p-dialog {
   ::ng-deep .p-dialog-content {
     border-top: none !important;
     background-color: pink;
     }
   }
}

while popup is the styleClass of the dialog

Solution

  • Providing :ng-deep (Deprecated) is not needed in the inner nesting, just providing it on the root of the CSS will apply it.

     ::ng-deep .popup {
     .p-dialog {
         .p-dialog-content {
             border-top: none !important;
             background-color: pink;
        }
    }
}

    Also ng-deep is deprecated, so you can move this to the global styles scss file while getting rid of ng-deep and it will work fine.