如何为特定的 angular 组件覆盖剑道 css？

Question

我有一个使用 Kendo Dialog 和 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>

在那里我没有使用 Kendo-window，但由于 inheritance.k-window-content 和其他类被应用。 我想覆盖剑道对话内容的填充，即我希望在滚动视图中显示边缘到边缘的图像，但由于剑道窗口 class，我无法找到特定于我的组件的解决方案。 我有一个解决方案

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

但我不想全局执行此操作，否则会破坏其他剑道对话框的使用。

Answer 1

您也可以尝试全局执行此操作，就像我将剑道网格包装在一个 div 中并为其分配 id 一样，然后应用与该 Id 相关的 css：

剑道.html

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

styles.css

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