widthをautoとして含むindex.htmlのベースCSSファイルをインポートしていますが、このスタイルはstyleUrlsを使用してコンポーネントで定義したスタイル(幅を70%として使用)より優先されます:["..."] 。私のコンポーネントスコープのCSSが従来の方法で定義されたスタイリングより優先されるようにする最良の方法は何ですか?グローバルスタイルのスコープをトップレベルのコンポーネントに設定する必要がありますか?なぜ子コンポーネントのスタイルがグローバルCSSによって上書きされますか?
2
A
答えて
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
関連する問題
- 1. 上書きCSSスタイル
- 2. Luevelのbootstrapp-sassによってVueコンポーネントのcssが上書きされています
- 3. このデータは別のコンポーネントによって上書きされますか?
- 4. Vaadin CssLayout:子コンポーネントのスタイル/ CSSを更新できますか?
- 5. MenuItemスタイルが上書きされているようです
- 6. CSSが上書きされないようにする
- 7. URLはApacheによって上書きされますか?
- 8. すべてのCSSスタイルをCSSセレクタで上書きする
- 9. CSSスタイルを上書きする?
- 10. Eclipse CSSスタイル:レイアウトの上書きSWT.HORIZONTALE?
- 11. 上位コンポーネントコンポーネントreduxディスパッチがラップされたコンポーネントreduxディスパッチによって上書きされる
- 12. 特定の兄弟コンポーネントがレンダリングされるときにReactjsスタイルのコンポーネントが異なって表示される
- 13. file_put_contentsが上書きされないのはなぜですか?
- 14. まだCSSが上書きされています
- 15. CSSの計算されたプロパティパネルでは、一番上のスタイルはあまり具体的でないスタイルを上書きしていないようです。
- 16. CSSは分割されたスタイルの上書きされたスタイルを表示します
- 17. 角2のスタイルが子コンポーネントに適用されない
- 18. woocommerceカートの変更がcheckout.jsによって上書きされています
- 19. アレイが上書きされるのはなぜですか?
- 20. Vaadin要素でAngular 2コンポーネントにCSSスタイルが適用されないのはなぜですか?
- 21. ファブリックによってsvn設定が上書きされる
- 22. 別のCSSスタイルを上書きするCSSスタイルを作成する方法
- 23. 上書きされたCSSルールがマークアップに影響を与えているのはなぜですか?
- 24. ボタン上のIphoneスタイルは上書きされません
- 25. サービスのようなコンポーネントを上書きしますか?
- 26. UITabBarItemのタイトルはUIViewControllerのタイトルによって上書きされますか?
- 27. PrimeNGのFileUploadコンポーネントのスタイルを、通常のファイルアップロードフィールドのように上書きする
- 28. CSSが動作していない、W3.CSSが上書きされていますか?
- 29. CSSスタイルのコンテンツの特殊な部分をグローバルに上書きせずに変更するにはどうすればよいですか?
- 30. なぜポインタは上書きされ続けますか?
コードを共有してください。 – micronyks