如何覆盖特定角度组件的剑道 css？答案

【问题标题】：How can I override a kendo css for a particular angular component?如何覆盖特定角度组件的剑道 css？
【发布时间】：2020-07-21 14:36:27
【问题描述】：

我有一个使用 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，但由于继承 .k-window-content 和其他类被应用。我想覆盖 kendo 对话框内容的填充，即我希望在滚动视图中显示边缘到边缘的图像，但由于 kendo-window 类，我无法找到特定于我的组件的解决方案。我有一个解决方案使用

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

但是我不想在全局范围内这样做，否则会破坏其他剑道对话框的使用。

【问题讨论】：

标签： javascript css angular kendo-ui kendo-window

【解决方案1】：

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

剑道.html

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

styles.css

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

【讨论】：