按标识

Question

我正在为Angular使用kendo-ui控件，需要一种方法来设置单个组件的样式。我知道您可以执行:host /deep/ .k-numeric-wrap {}之类的操作来将样式应用于同一类的所有组件，但我如何将:host /deep/策略应用于单个组件？

例如kendo-autocomplete如下所示：

我在HTML中将kendo-autocomplete定义为#language id。有谁知道只为#language访问样式的方法？我试过了：

:host #language .k-autocomplete {}
:host(#language) .k-autocomplete {}

Answer 1

我在id="language"元素上看不到kendo-autocomplete。

这就是为什么其中#language的选择器无效的原因。

此外，由于k-autocomplete类在元素本身上，因此选择器应为#language.k-autocomplete，它们之间没有空格。无论如何，选择器的类部分是多余的，因为ID选择器是最具体的。

修改

好的，这应该有效（测试）：

1. 使用id="language"代替#language。

2. 在您的样式中，请写下以下内容：

   /deep/ #language {
       max-width: 10em;
   }
   

请参阅演示here。

Answer 2

到目前为止，我发现工作的唯一方法是使用旧的内联style标记。这不是最好的解决方案，但适用于我的情况，因为我只想设置max-width：

<kendo-autocomplete #language
    style="max-width: 10em;"
    formControlName="langSelect"
    [valueField]="'Descrip'"
    [placeholder]="'e.g. French'"
    [data]="langSet">
</kendo-autocomplete>