Angular2组件样式编号

我正在使用kendo-ui控件来处理Angular，并需要一种方法来设置各个组件的样式。我知道你可以使用像:host /deep/ .k-numeric-wrap {}这样的东西来将样式应用于同一类的所有组件，但是我如何将:host /deep/策略应用于单个组件？Angular2组件样式编号

例如kendo-autocomplete看起来是这样的：

我在HTML定义kendo-autocomplete为#language ID。有没有人知道一种方式来访问#language的样式？我已经试过：

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

来源

2017-07-11 Milo

'：主机/深/ #language .K数字缠绕{}'？ – n00dl3

@ n00dl3我试过了，没有运气 – Milo

你试图设置什么风格？ – Shai

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

这就是为什么其中有#language的选择器无法正常工作的原因。

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

编辑：

确定这应该工作（测试）：

使用id="language"，而不是#language。

在你的造型，写：

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

见演示here。

来源

2017-07-12 06:30:31 Shai

我确实在我的HTML中声明了它：'' – Milo

用'' – Shai

好的 - 试试我以前做过什么？或者你有更好的建议？ – Milo

我发现迄今为止工作的唯一方法是旧的内嵌style标记。这是不是最好的解决办法，但适合我的情况，因为我只想设置max-width：

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

来源

2017-07-12 13:03:08 Milo

Angular2组件样式编号

回答

相关问题