web-dev-qa-db-ja.com

親からスタイルを適用

このテンプレートを持つコンポーネントがあるとします。

<div class="frame">
  <span class="user-defined-text">{{text}}</span>
</div>
<style>
  span { font-size: 3em; }
  .frame { ... }
</style>

コンポーネントに適用されたスタイルをどのようにマージできますか？.

<custom-component [text]="'Some text'">
<style>custom-component { font-weight: bold; }</style>

最終出力「Some text」が両方とも太字になるようにand 3emサイズですか？

さらに良いのは、Host要素の計算されたスタイルを取得する方法があるため、たとえば、background-colorからホストのborder-color私のテンプレートのいくつかの要素の？

cssangularangular2-directives
12
Soumya
  • セットする encapsulation: ViewEncapsulation.None外部からのスタイルを適用できるようにします。
import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'custom-component',
  encapsulation: ViewEncapsulation.None
})
export class Custom {
  • styleUrlを使用して、ホストセレクターと組み合わせてCSSファイルを追加します
:Host(.someClass) {
      background-color: blue;
}

<custom-component class="someClass"></custom-component>

要素に追加されたクラスに応じてスタイルを適用します。

21
Günter Zöchbauer

これは古いことはわかっていますが、もっと見やすいはずです。 /deep/セレクターを使用して、スタイルを子コンポーネントツリーからすべての子コンポーネントビューに強制します。 /deep/セレクターは、ネストされたコンポーネントのどの深さでも機能し、コンポーネントのビューの子とコンテンツの子の両方に適用されます。

これはよりクリーンで実装しやすいと思います。

parent.css

/deep/ .class {
    background-color: red;
}

https://angular.io/docs/ts/latest/guide/component-styles.html

17
Mike

CSSに関して、コンポーネントはシャドウDOMをサポートします。これは、それらのスタイルが分離されていることを意味します。デフォルトモードは分離されています。したがって、コンポーネント（stylesプロパティ）にCSSスタイルを定義する必要があります。

カプセル化モードをViewEncapsulation.Noneに変更することもできます。このようにして、コンポーネントは親コンポーネントのスタイルを見ることができます。

@Component({
  selector: 'child',
  encapsulation: ViewEncapsulation.None,
  (...)
})
export class MyComponent {
  (...)
}

それがあなたを助けることを願っています、ティエリー

0
Thierry Templier

：Host擬似クラスセレクターを使用して、任意の<custom-component>。

クラスを使用して、CSSスタイルをカスタム要素に書き込むことはできません。

例

<custom-component class="custom-comp" [text]="'Some text'">

.custom-comp {
  font-weight: bold;
  color: green;
}

このために、：Hostセレクターを使用して、以下のようにスタイルを設定できます。

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.html',
  styleUrls: ['./custom-component.scss']
})

Custom-component.scss

:Host {
  font-weight: bold;
  color: green;
}

スタイルの詳細については、Angular4の公式ドキュメントの ：Host 要素をご覧ください。

0
RAJA