How can I override a kendo css for a particular angular component?

Question

I have a component that uses Kendo Dialog and Kendo ScrollView.

<kendo-dialog
  [width]="750"
  class="bs-like"
  *ngIf="isOpen"
  (close)="closeModal()"
  [ngClass]="headerClass"
>
<kendo-dialog-titlebar>
    <span class="kendo-title">{{ Title}}</span>
  </kendo-dialog-titlebar>
<div>
    <kendo-scrollview
      class="scroller"
      #kendo_Scroll
      [data]="data"
      [width]="100%"
      [height]="400px"
      [arrows]="true"
      [pageable]="true"
   >
      <ng-template let-item="item">
        <div class="showImage">
          <h2 class="title">{{ item.title_image}}</h2>
          <div
            class="image"
            [ngStyle]="{
              background: 'url(' + item.Url + ') no-repeat'
            }"
            [style.minWidth.px]="100%"
          ></div>
        </div>
        <div class = "Alt-text">
        <p class="text" [innerHTML]="item.text"></p>
      </div>
      </ng-template>
    </kendo-scrollview>
  </div>
</kendo-dialog>

In there I am not using Kendo-window but due to inheritance .k-window-content and other classes are applied. I want to override padding for kendo dialog content i.e I want the edge to edge images shown in scroll View but due to kendo-window class, I am unable to find solution that is specific to my component. I have a solution using

/deep/ .k-window-content
{
  padding : 0 !important;
}

but I don't want to do this globally otherwise it will break other kendo dialog usage.

Answer 1

You can also try doing it globally, As I did by wrapping the kendo grid in a div and assigning it id, then applying css pertaining to that Id:

kendo.html

<div id="kendo-grid"> 
 <kendo-dialog>
.....

styles.css

#kendo-grid .kendo-grid td {
//Your css
}