Angular2の "深い" CSSクラスを優先させるにはどうすればいいですか？

Question

私の最上位コンポーネントのstylesブロックで、ng-content内に表示されるアイテムの余白を設定する/deep/ cssクラスを定義します。子コンポーネントが異なるマージンを定義した独自のcssクラスを適用しても、そのcssクラスを優先させるにはどうすればよいですか。例えば

：

ParentComponent.ts：

@Component({ 
    selector: 'my-parent', 
    styles: [` 
     /deep/ .child-item { /* I WANT THIS TO TAKE PRECEDENCE */ 
      margin-right: 10px; 
      margin-left: 10px; 
     } 
    `], 
    template: ` 
     <div> 
      <ng-content></ng-content> 
     <div> 
    ` 
}) 
export class ParentComponent {} 

ChildComponent.ts

@Component({ 
    selector: 'my-child', 
    styles: [` 
     .less-important-class { /* THESE MARGINS SHOULD BE IGNORED IN CONFLICTS */ 
      margin-right: 5px; 
      margin-left: 5px; 
      background-color: rgba(255, 0, 0, 1.0); 
     } 
    `], 
    template: ` 
     <button type="button" class="less-important-class child-item">My Little Button</button> 
    ` 
}) 
export class ChildComponent {} 

子品目がコンパイルされたスタイルシートの最初に表示されるので、私は、あまりimportant-考えますクラスはより高いCSSの特異性を持ち、2つのクラス間の競合に勝ちます。子アイテムに優先順位を与えるにはどうすればよいですか？

Answer 1

/深い/あなたは/深い/ {マージン：** PX}使用することができますが、親にdiv要素のマージンを変更したいと言う乗るオーバー両親スタイルに使用されている限り、私はあなたが定義する知っているよう

を親コンポーネントが子コンポーネントのスタイルに干渉しないようにする場合は、子コンポーネントのスタイルを使用します。親のスタイルを優先するには、子供のスタイルを定義しないといいでしょう。あなたの場合、子コンポーネントで定義されたスタイルにマージンを指定しないでください。

もう1つの方法は、親子でスティリーを定義するのではなく、新しいグローバルスタイルシートを作成し、そこにグローバルスタイルだけを追加して、そのスタイルシートをindex.htmlで参照する必要があります。親と子の両方のスタイルからstyles.cssを追加し、index.htmlのstyles.cssを参照してください。