overriding css styles without using ::ng-deep

[Eros]

I am trying to get rid of the current ng-deep use cases in our app.

The class that being override is as follows:

css:
::ng-deep .k-chat.k-selected {
margin-bottom: 0px !important;
};

html:
<kendo-chat class="chatbox" [messages]="messages" [user]="user">

<ng-template kendoChatMessageTemplate let-message>

<div [innerHTML]="message.text | sanitizeHtml"></div>

</ng-template>

</kendo-chat>

[Georgi]

Hi Eros,

Thank you very much for the details provided.

One possible approach that would allow you to modify the default styling of the Kendo components without using ::ng-deep would be for the developer to set the encapsulation metadata of the component to ViewEncapsulation.None:

encapsulation: ViewEncapsulation.None

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

https://stackblitz.com/edit/angular-3pgm2w

Alternatively, the developer could provide the custom CSS for the component in the global style.css file of the project. For further reference, please check out the following StackBlitz demo:

https://stackblitz.com/edit/angular-suzanp?file=src%2Fstyles.css

I hope the provided information helps. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik