コンポーネントのスタイルからの材料設計アイテムのアクセスクラス

Question

md-list-itemディレクティブを使用するコンポーネントがあります。

このディレクティブは、md-list-itemという名前のクラスを持つdivを生成します。

問題は、私のコンポーネントのスタイル属性内からmd-list-itemクラスにスタイルを追加できないことです。

@Component({ 
    selector: 'my-component', 
    template: ` 
    <a md-list-item> 
    </a> 
    `, 
    styles: [` 
    .md-list-item{ 
     // I would like to be able to add css rules 
     // for the md-list-item class here 
    } 
    `] 
}) 

コンポーネントのスタイル属性内からmd-list-itemクラスを編集する方法はありますか？

Answer 1

あなたが提供したコードに基づいたので、カップルの事：

をあなたが実際に属性ディレクティブではなく、ディレクティブセレクタとしてmd-list-itemを渡しています。実際の要素自体はaタグです。 Angularは、属性md-list-itemを使用して機能を追加しますが、これまでのようにCSS クラスセレクタでは選択できません。そのようにそれを

<md-list> 
    <md-list-item> 
    <a href="your-link-here">Other List Content Here</a> 
    </md-list-item> 
</md-list> 

とターゲット：スペックパー

、これを行うには容易であろう

/*notice we're selecting an element and not a class*/ 
md-list-item { 
    style: stuff; 
} 

md-list-item a { 
    text: stuff 
} 

これは、それらをMDディレクティブで良い仕事して許可する必要があります必要に応じてコンテンツをラップします。けれども...

a[md-list-item] { 
    .... 
} 

：これはあなたのために動作しない場合は、何らかの理由で

は、あなたが<a md-list-item>にクラスを追加し、そのようにターゲット、またはあなたは、CSS属性セレクタを使用することができますすることができます一般的にそれはずっと遅いです。

EDITHere's a Plunker of all three solutions.

Answer 2

私は同じことを疑問に思ってきました！私は材料のコンポーネントにいくつかのインラインスタイルを行うことに頼る必要がありました。ドキュメンテーションにそれに関する情報があればいいと思う。

クイックフィックスですが、理想的ではありません... <p md-line style="margin: 5px;"