在 kendo ui mutiselect angular 中更改所选项目的背景颜色答案

【问题标题】：Changing background color of selected item in kendo ui mutiselect angular在 kendo ui mutiselect angular 中更改所选项目的背景颜色
【发布时间】：2019-03-13 14:16:29
【问题描述】：

我正在尝试执行 kendo ui multiselect 一些类似下面的代码。但我需要将所选项目的背景颜色从红色更改为其他颜色。我尝试在弹出设置中提供自定义 css，但它仍然无法正常工作。大多数谷歌搜索的答案都在 jquery 中，但我需要 angular 4.Could you help me out

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
<p>Custom values are <strong>enabled</strong>. Type a custom value.</p>

<p>primitive data</p>
<div class="example-wrapper">
    <kendo-multiselect
        [data]="sizes"
        [value]="selectedSizes"
        [allowCustom]="true"
        (valueChange)="onSizeChange($event)"
    >
    <ng-template kendoMultiSelectCustomItemTemplate let-customText>
        <strong>{{ customText }}</strong>
    </ng-template>
    </kendo-multiselect>
</div>
  `
})
export class AppComponent {
public sizes: Array<string> = [ "Small", "Medium", "Large" ];
public selectedSizes: Array<string> = [];

public onSizeChange(value) {
    this.selectedSizes = value;
}
}

【问题讨论】：

标签： kendo-ui kendo-ui-angular2

【解决方案1】：

将以下 CSS 添加到您的组件中：

::ng-deep .k-item.k-state-selected {
    background-color: green !important;
}

【讨论】：

【解决方案2】：

这是剑道解决方案。

:host ::ng-deep .k-state-selected {
     background-color: green !important; 
}

网址：https://www.progress.com/blogs/options-for-styling-components-in-kendo-ui-builder

【讨论】：