352

私は親コンポーネントを持っています:

<parent></parent>

そして、このグループに子コンポーネントを追加したいと思います:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

親テンプレート:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

子テンプレート:

<div class="child">Test</div>

parentとは 2 つの別個のコンポーネントであるためchild、それらのスタイルは独自のスコープにロックされています。

私の親コンポーネントで私はやってみました：

.parent .child {
  // Styles for child
}

しかし、スタイルはコンポーネント.childに適用されていません。child

スコープの問題を解決するために、のスタイルシートをコンポーネントstyleUrlsに含めるために使用してみました:parentchild

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

しかし、それは役に立ちませんでした。また、childスタイルシートをフェッチして別の方法を試しましたparentが、どちらも役に立ちませんでした。

では、親コンポーネントに含まれる子コンポーネントのスタイルをどのように設定するのでしょうか?

4

20 に答える 20

306

更新 - 最新の方法

避けられるならやらない。Devon Sans がコメントで指摘しているように、この機能は非推奨になる可能性が高いです。

最後の更新

Angular 4.3.0から 現在 (Angular 12.x) まで、すべての貫通型 CSS コンビネータは廃止されました。::ng-deepAngular チームは、以下に示す新しいコンビネータを導入しました。

デモ: https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview

styles: [
    `
     :host { color: red; }
     
     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],



template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

古い方法

encapsulation modeおよび/またはを使用できますpiercing CSS combinators >>>, /deep/ and ::shadow

作業例: http://plnkr.co/edit/1RBDGQ?p=preview

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`
于 2016-04-10T10:50:23.313 に答える
108

は使用しないでください::ng-deep。非推奨です。Angular で、子コンポーネントのスタイルを親から変更する適切な方法は、以下を使用することですencapsulation(意味を理解するには、以下の警告をお読みください)。

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

そして、::ng-deep を必要とせずに、コンポーネントから css を変更できるようになります。

.mat-sort-header-container {
  display: flex;
  justify-content: center;
}

警告: これを行うと、このコンポーネント用に作成したすべての css ルールがグローバルになります。

CSS のスコープをこのコンポーネントとその子のみに制限するには、CSS クラスをコンポーネントのトップ タグに追加し、CSS をこのタグの「内側」に配置します。

テンプレート：

<div class='my-component'>
  <child-component class="first">First</child>
</div>,

scss ファイル:

.my-component {
  // All your css goes in there in order not to be global
}
于 2018-05-03T16:37:37.810 に答える
16

同じ問題があったため、scss/sass で angular2-cli を使用している場合は、'>>>' の代わりに '/deep/' を使用します。最後のセレクターはまだサポートされていません (ただし、css ではうまく機能します)。

于 2016-10-15T12:03:43.533 に答える
15

Angular コンポーネントは自己完結型のエンティティであり、外の世界で利用できるものを明示的に宣言する必要があるため、子コンポーネント要素の CSS ルールを親コンポーネントに記述しないでください。子のレイアウトが将来変更された場合、他のコンポーネントの SCSS ファイルに散らばっているその子コンポーネント要素のスタイルは簡単に壊れてしまい、スタイルが非常に壊れやすくなります。それViewEncapsulationがCSSの場合です。それ以外の場合は、オブジェクト指向プログラミングの他のクラスから、あるクラスのプライベート フィールドに値を割り当てることができたとしても同じです。

したがって、子ホスト要素に適用できる一連のクラスを定義し、子がそれらにどのように応答するかを実装する必要があります。

技術的には、次のように実行できます。

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

つまり、:hostAngular + CSS クラスのセットによって提供される疑似セレクターを使用して、子コンポーネント自体で可能な子スタイルを定義します。その後、定義済みのクラスを<child>ホスト要素に適用することで、これらのスタイルを外部からトリガーすることができます。

于 2018-09-27T15:33:18.883 に答える
-1

angular.io/guide/component-stylesは次のように述べているため、より明確にするために例を提案します。

シャドウ ピアシングの子孫コンビネータは廃止され、主要なブラウザやツールからサポートが削除されています。そのため、Angular でのサポートを中止する予定です (/deep/、>>>、::ng-deep の 3 つすべて)。それまでは、ツールとの幅広い互換性のために ::ng-deep を優先する必要があります。

で、必要に応じapp.component.scssてインポートします*.scss。_colors.scssいくつかの一般的な色の値があります:

$button_ripple_red: #A41E34;
$button_ripple_white_text: #FFF;

すべてのコンポーネントにルールを適用する

クラスを持つすべてのボタンbtn-redがスタイルされます。

@import `./theme/sass/_colors`;

// red background and white text
:host /deep/ button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

単一のコンポーネントにルールを適用する

btn-redコンポーネントにクラスを持つすべてのボタンapp-loginがスタイルされます。

@import `./theme/sass/_colors`;

/deep/ app-login button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}
于 2017-09-08T11:33:16.583 に答える