本地环境Kendo UI Chip组件丢失样式与边框 Stackblitz运行正常 求排查

官方测试代码在Stackblitz运行完全正常，有对应正常效果参考；但在本地localhost运行时，kendo-chip组件完全丢失所有样式，表现为普通块级元素，有对应异常效果参考。目前无法在Stackblitz上复现该异常，已完成的排查操作如下：

• 停止本地服务后，重新执行npm i; npm start操作；
• 对比本地项目与Stackblitz的package.json文件，所有依赖均已在本地项目中配置安装。

相关项目配置与代码 #

component.ts 文件 #

import { Component,  ViewChild, ViewEncapsulation } from '@angular/core';
import { ChipRemoveEvent } from '@progress/kendo-angular-buttons';
import { AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';

@Component({
  selector: 'sentryx-email-chips',
  templateUrl: './email-chips.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./email-chips.component.scss']
})
export class EmailChipsComponent {
  @ViewChild("contactslist") public list: AutoCompleteComponent;

  public contacts: Array<{ label: string; iconClass: string }> = [
    { label: "Pedro Afonso", iconClass: "k-chip-avatar" },
    { label: "Maria Shore", iconClass: "k-chip-avatar" },
    { label: "Thomas Hardy", iconClass: "k-chip-avatar" },
    { label: "Christina Berg", iconClass: "k-chip-avatar" },
    { label: "Paula Wilson", iconClass: "k-chip-avatar" }
  ];

  public selectedContacts: Array<any> = [this.contacts[1]];

  public valueChange(contact: string): void {
    console.log(contact);
    if (contact === "") {
      return;
    }

    this.selectedContacts.push({
      label: contact,
      class: `custom-style`
    });

    // const contactData = this.contacts.find(c => c.label === contact);

    // if (!this.selectedContacts.includes(contactData)) {
    //   this.selectedContacts.push(contactData);
    // } else {
    //   this.selectedContacts.push({
    //     label: contact,
    //     iconClass: "k-chip-avatar paula"
    //   });
    // }

    this.list.reset();
  }

  public onRemove(e: ChipRemoveEvent): void {
    console.log("Remove event arguments: ", e);
    const index = this.selectedContacts
      .map(c => c.label)
      .indexOf(e.sender.label);
    this.selectedContacts.splice(index, 1);
  }
}

HTML 模板代码 #

<kendo-chip *ngFor="let contact of selectedContacts" [class]="contact.class" [label]="contact.label" [removable]="true"
  [iconClass]="contact.iconClass" (remove)="onRemove($event)">
</kendo-chip>
<div class="example">
  <kendo-autocomplete #contactslist [data]="contacts" class="contacts" valueField="label"
    [kendoDropDownFilter]="{ operator: 'contains' }" [filterable]="true" placeholder="To: Email Adress*"
    (valueChange)="valueChange($event)">
  </kendo-autocomplete>
</div>

自定义 CSS 代码 #

.k-chip {
    margin-right: 10px;
}
.k-block {
    min-height: 300px;
    padding: 20px;
}
.k-textarea {
    width: 100%;
    min-height: 145px;
}
.contacts {
    border-width: 0 0 1px 0;
    width: 100%;
    margin: 30px 0;
}
.contacts.k-state-focused {
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.03);
}

.custom-style {
    color: #6200ee;
    background-color: #f3ebfe;
    border-color: #6200ee;
}

补充说明 #

经测试，项目内其他Kendo UI组件均工作正常，包括上述的kendo-autocomplete下拉组件、kendoButton按钮组件，按钮使用示例为<button kendoButton >Browse</button>，效果正常。目前需要定位Chip组件样式异常的原因。

内容的提问来源于stack exchange，提问作者Dhruv