按 ID 设置 Angular2 组件样式

Question

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

例如 kendo-autocomplete 看起来像这样：

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

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

Answer 1

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

这就是为什么带有 #language 的选择器不起作用的原因。

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

编辑：

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

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

在您的样式中，写入以下内容：

/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>

按 ID 设置 Angular2 组件样式

Angular2 Component Styling by ID

css

styling

kendo-ui

angular