1つのコンポーネントを設定して実行し、異なる場所で異なるスタイルで使用するのがベストプラクティスですか? (動的スタイル?)同じコンポーネント、異なるスタイル
1
A
答えて
1
あなたの中にはstyleUrls
/styles
オプションがあります。コンポーネントが表示されるときに使用するコンポーネントメタデータです。 ViewEncasulation
をEmulated
/Native
(DOMをシャドーします)とすると良いでしょう。
私が使用してさまざまなスタイルの間this great article
5
スイッチ上に読むことをお勧めします:異なる(事前に定義されたクラスまたは属性)
:host-context(.class1) {
background-color: red;
}
:host-context(.class2) {
background-color: blue;
}
を適用することにより、ホスト・コンテキスト()
スイッチ
<my-comp class="class1></my-comp> <!-- should be red -->
<my-comp class="class2></my-comp> <!-- should be blue -->
の使用グローバルスタイル
* /deep/ my-comp.class1 {
background-color: red;
}
// or to style something inside the component
* /deep/ my-comp.class1 /*deep*/ div {
border: solid 3px yellow;
}
* /deep/ my-comp.class2 {
background-color: blue;
}
使用ホスト結合
@Component({
selector: 'my-comp',
host: {'[style.background-color]':'backgroundColor'}
})
class MyComponent {
@Input() backgroundColor:string;
}
<my-comp background-color="red"></my-comp>
<my-comp background-color="red"></my-comp>
は面白い "ハック" のためにもhttps://stackoverflow.com/a/36503655/217408参照してください。
0
私によれば、コンポーネントのプロパティ(属性)を通じてスタイルを制御することがベストプラクティスです。
関連する問題
- 1. React Routerと異なるルートに同じコンポーネントを使用する
- 2. 異なるスタイルのテキストをCSSで同じ幅にする
- 3. 同じアプリケーション内の異なるバージョンのReportViewerコンポーネント
- 4. UIPickerView同じコンポーネントのスウィフトの行の高さが異なる
- 5. 同じロジックで異なるスタイルの2つのアンドロイドアプリ
- 6. 同じクエリ、異なるDB、同じDB構造、同じDBサーバー、異なる実行計画
- 7. 複数のReactJSコンポーネントを同じバンドル内の異なるページに配置する
- 8. コード内の異なるインスタンスに同じスタイルを2回設定する
- 9. Windowsインストーラ:2つの異なるインストーラで同じコンポーネントを共有できます
- 10. msiデータベースのコンポーネントテーブルの2つの異なるエントリの同じコンポーネントGUID
- 11. CSSリセット後に2つの要素の同じスタイルが異なる(IEのみ)
- 12. CSSのスタイルは同じでサイズは異なるHTMLアンカーと入力ボタン
- 13. CSSスタイルは同じブラウザ/別のコンピュータで異なる動作をします
- 14. 同じPythonインストールのパッケージと同じスクリプトの異なるバージョン
- 15. Azure異なるリソースグループと同じvnetの同じVM名
- 16. 同じハッシュ、異なる振る舞い
- 17. 異なるサイトで同じZインデックスが異なる動作
- 18. 同じクエリ内の異なるプロジェクトの異なるリポジトリ
- 19. 同じjavascriptの異なるサイト、大幅に異なるパフォーマンス
- 20. 異なるフィールドの同じクラス(Map.class)の異なるXStream別名
- 21. 異なるターミナルウィンドウ、同じ場所、異なる結果?
- 22. Asp.net MVC同じビュー名、異なるパス
- 23. 同じ.vimrc、2つの異なるコンピュータ
- 24. 異なるビューの同じクラス
- 25. Smarty - 同じテンプレートの異なるコンテンツ
- 26. ASP.NET MVCの異なるモデル、同じデータ
- 27. python - 同じ命令、異なる結果
- 28. タイムスタンプ。同じ日付の異なる値
- 29. CoreGraphicsと同じコードが異なる
- 30. 同じメニュー異なる活動
はい、:host-context()は私にとって完璧です。ありがとう。 –
テーマごとにスタイルシート全体が必要な場合は、数千のクラスがあり、10のテーマが必要な場合は実行不可能です。 – fdsfdsfdsfds
あなたのコメントと私の答えがどのように関連しているのか分かりません。 –