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組件樣式編號

回答

相關問題