Angular 2でサードパーティ製コンポーネントを使用したスタイル調整
コンポーネントはANGULAR 2の真髄であり、ネット上にもPRIMENGのようなオープンソースのコンポーネントが多く、UIコンポーネントがたくさんあります.
しかし、多くのコンポーネントはデフォルトのスタイルを調整する必要があるため、公式のcssクラスに基づいてコンポーネントに追加されます.
:host
/deep/
.ui-datatable-scrollable-body
{
height
:
500px
;
}
キーワード:host要素ホストセレクタ
/deep/
コンポーネントスタイルは、通常、コンポーネント自体のHTMLにのみ適用されます.
この例では、宿主要素から現在の要素、さらにDOMのすべてのサブ要素まで、すべての
しかし、多くのコンポーネントはデフォルトのスタイルを調整する必要があるため、公式のcssクラスに基づいてコンポーネントに追加されます.
:host
/deep/
.ui-datatable-scrollable-body
{
height
:
500px
;
}
キーワード:host要素ホストセレクタ
/deep/
コンポーネントスタイルは、通常、コンポーネント自体のHTMLにのみ適用されます.
/deep/
セレクタを使用して、各レベルのサブコンポーネントのビューに対してスタイルを強制することができます.これは、コンポーネントのサブビューだけでなく、コンポーネントの内容にも作用します.この例では、宿主要素から現在の要素、さらにDOMのすべてのサブ要素まで、すべての
要素をターゲットとしています.:host /deep/ h3 {
font-style: italic;
}
参照リンク:https://angular.cn/docs/ts/latest/guide/component-styles.html