Angular2コンポーネントIDでスタイル付けする

Question

私はkendo-uiの角度を使用しています。個々のコンポーネントをスタイルする方法が必要です。 :host /deep/ .k-numeric-wrap {}のようなものを使って同じクラスのすべてのコンポーネントにスタイリングを適用できますが、:host /deep/戦略を個々のコンポーネントに適用するにはどうすればよいですか？

私はHTMLでkendo-autocomplete#languageとしてIDと定義例：kendo-autocompleteについては

は次のようになります。 #languageのスタイリングにアクセスする方法を知っている人はいますか？私が試した：私はkendo-autocomplete要素にid="language"が表示されていない

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

Answer 1

。

これは、#languageのセレクタが機能しない理由です。

また、k-autocompleteクラスは要素自体にあるため、セレクタは#language.k-autocompleteであり、その間にスペースはありません。とにかく、IDセレクタが最も特定的なので、セレクタのクラス部分は冗長です。

EDIT：

OK、これは（テスト）動作するはずです：

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>