在 Kendo 中为 Angular 下拉列表设置字体大小

Question

在这个 StackBlitz 中，我有一个 Kendo 用于 Angular DDL，字体大小设置为 6px，但它不起作用。 objective 是改变弹出列表的字体大小。如何解决这个问题？

@Component({
selector: 'my-app',
template: `
 <kendo-dropdownlist 
      [data]="listItems" 
      [ngStyle]="{ 'font-size': '6px' }">
 </kendo-dropdownlist>
`
})
export class AppComponent {
  public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
}

Answer 1

我已经更新了你的 blitz，添加了这一行：

.k-animation-container li, .k-animation-container-shown li {
     font-size: 6px!important;
}

给你的styles.css

Answer 2

还有一个（更灵活的）解决方案：

1. 添加

   .popup-class {font-size: 6px;}
   

   给你的styles.css

2. 添加

   [popupSettings]="{ popupClass: 'popup-class' }"
   

   到 kendo-下拉列表中的模板。

使用此解决方案，您可以单独设置每个下拉列表的样式。另一种解决方案可能是使用项目模板。