ngui overlay - how to change the styles

[Cristina-Alboni]

Hello,

I integrated the overlay in my project and I have some style issues.
What I need is to apply a custom style on the "ngui-overlay" element, which changes the transparency and z-index.
The "ngui-overlay" element is automatically added in the code behind and it looks like below:

<ngui-overlay style="display: flex; position: fixed; background-color: rgba(0, 0, 0, 0.2); top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; justify-content: center; align-items: center;"><div id="window-loading" ngui-overlay-of="window" ng-reflect-overlay-of="window">

Shouldn't there be a possibility to add a custom class on this element, when it is generated? And this class should be added as attribute to the element, in case someone wants to use it.

Thank you.

[allenhwkim]

I think you can override inline style with !important.

https://css-tricks.com/override-inline-styles-with-css/

[ghost]

How does this solve the problem, the ngui-overlay element is dynamically created.
One would need to add this in component's css

:host /deep/ ng2-overlay{
 //add css here
}