2016-10-20 20 views
2

widthをautoとして含むindex.htmlのベースCSSファイルをインポートしていますが、このスタイルはstyleUrlsを使用してコンポーネントで定義したスタイル(幅を70%として使用)より優先されます:["..."] 。私のコンポーネントスコープのCSSが従来の方法で定義されたスタイリングより優先されるようにする最良の方法は何ですか?グローバルスタイルのスコープをトップレベルのコンポーネントに設定する必要がありますか?なぜ子コンポーネントのスタイルがグローバルCSSによって上書きされますか?

+2

コードを共有してください。 – micronyks

答えて

2

一般的にコンポーネントのCSSは、プレオリがあるコンポーネントです。

カプセル化を使用してみることができます:app.componentのViewEncapsulation.None。

コンポーネントにクラスがある場合、優先度があります。

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

0

あなたのグローバルなCSSのセレクタの特異性を高めることができます。

あなた<my-comp class="some-class">

.someClass { 
    width: 70%; 
} 

を持っている場合は、あなたが依存のために、あなたはあなたのセレクタの特異性を高めるためにどのような方法

body .some-class.some-class { 
    width: 100%; 
} 

または

body my-comp.some-class.some-class { 
    width: 100%; 
} 

で上書きすることができますが最適に動作しますあなたの特定の要件について。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

関連する問題