2017-07-11 60 views
1

我正在使用kendo-ui控件來處理Angular,並需要一種方法來設置各個組件的樣式。我知道你可以使用像:host /deep/ .k-numeric-wrap {}這樣的東西來將樣式應用於同一類的所有組件,但是我如何將:host /deep/策略應用於單個組件?Angular2組件樣式編號

例如kendo-autocomplete看起來是這樣的:

kendo-control

我在HTML定義kendo-autocomplete#language ID。有沒有人知道一種方式來訪問#language的樣式?我已經試過:

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

':主機/深/ #language .K數字纏繞{}'? – n00dl3

+0

@ n00dl3我試過了,沒有運氣 – Milo

+0

你試圖設置什麼風格? – Shai

回答

1

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

這就是爲什麼其中有#language的選擇器無法正常工作的原因。

此外,由於k-autocomplete類在元素本身上,因此選擇器應該是#language.k-autocomplete,它們之間沒有空格。無論如何,選擇器的類部分是多餘的,因爲ID選擇器是最具體的。

編輯:

確定這應該工作(測試):

  1. 使用id="language",而不是#language
  2. 在你的造型,寫:

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

見演示here

+0

我確實在我的HTML中聲明瞭它:'' – Milo

+0

用'' – Shai

+0

好的 - 試試我以前做過什麼?或者你有更好的建議? – Milo

0

我發現迄今爲止工作的唯一方法是舊的內嵌style標記。這是不是最好的解決辦法,但適合我的情況,因爲我只想設置max-width

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