web-dev-qa-db-ja.com

テーマを有効にするにはどうすればよいですかAngular Material NPM module？

Angular Material を使用し、それが定義するコンポーネントを使用するアプリのカスタムテーマでスタイル設定できるようにするnpmモジュールを構築することは可能ですか？

例として、次のテンプレートを持つコンポーネントを含むnpmモジュールを作成するとします。

<button mat-raised-button color="accent">Click me!</button>

このコンポーネントを2つの異なるアプリにインポートして、それぞれが カスタムAngularマテリアルテーマ を定義し、ボタンの現在のアプリのテーマは？

現在、私は ng-packagr を使用してAngularフレンドリーなnpmモジュールを構築しています。ただし、私の知る限り、このモジュールには.scssコンパイル段階はパッケージ化プロセスの一部として行われます。つまり、モジュールで定義されたスタイルは、モジュールを使用するアプリのテーマでカスタマイズする能力を失います。

javascriptangularnpmangular-materialangular-material2
19
Nathan Friend

確かに、それは可能です。質問はAngularとは関係ありません。他のフレームワークにも当てはまります。

その前に、依存関係の逆転の概念に立ち向かう必要があります。アプリApp1とApp2を構築し、npmモジュールを使用するとしますlib再利用可能なコンポーネントが含まれています。アプリはlibの上に構築されています。つまり、アプリは上位レベルのモジュールであり、libは下位レベルのモジュールです。

libが自己完結型であると考える場合、理想的には、App1またはApp2で使用されているのと同じように実行する必要があります。しかし、あなたの要件は-libはアプリごとに異なる動作（この場合はスタイリング）を持つ必要があります。つまり、上位レベルのモジュールが下位レベルのモジュールの動作を決定する必要があるということです。つまり、依存関係を反転させているのです。それが依存関係反転の原則です。 WikipediaのDIP の詳細をご覧ください。

DIPを実現するには、ライブラリから何らかのポート/拡張機能を公開する必要があります。スタイリングの目的で、最も簡単な方法はSCSSミックスインを公開することです 。ただし、Webpack、rollup、ng-packageなどのビルドツールを使用すると、コンパイルされたディストリビューションが常に生成されます。ソースコード（ここではSCSS）とコンパイル済みコードをパッケージ化するには、追加のnode.jsスクリプトをいくつか記述する必要があります。これらのスクリプトは、コンパイル/バンドルのステップ中に実行されます。

私の仕事でも、同様の要件があります。従うべきガイドラインがいくつかあります。

  1. ライブラリのコンポーネントは、デフォルトのスタイル設定でそのまま使用できます。
  2. デフォルトでは、ライブラリのユーザーは毎回コンポーネントをカスタマイズする必要はありません。
  3. スタイルのコンポーネントからミックスインを公開します。
  4. ミックスイン内では、ハードコードされた設定を入れないでください。
  5. テーマ設定可能なコンポーネントを開発するときは、デフォルトから始めます。アプリケーション内のコンポーネントによって使用されるデフォルトのCSSクラスをオーバーライドします。コモンズのカスタマイズポイント/プロパティをチョークで取り出し、それをライブラリの次のバージョンに戻します。ライブラリ内で先行開発を行わないでください。それはしばしば手直しになります。

エンタープライズレベルのアプリがあります。合計5つの異なるアプリと、これら5つのアプリすべてにコモンズコンポーネントを提供する非公開のnpmモジュールが1つあります。しかし、私が言ったように、最初にアプリのクラスをオーバーライドし、共通モジュールに入れるのに十分な汎用性を感じたら、次のリリースに置くように、異なるスタイルを設定する必要があるいくつかのコンポーネントがあります。

1
Harshal Patil

これを行う方法の要点は、部分的に 独自のコンポーネントをテーマにした角度のある材料 ガイドでカバーされています。コンポーネントのテーマ設定に加えて、ライブラリ（ "npmモジュール"）は、Angular angular-material-theme() mixin。これは通常、スタイルを定義してスタイルシートファイルを作成するのではなく、スタイルを定義してすべてのコンポーネントテーマのミックスインを呼び出すミックスインを定義することによって行われます。ミックスインはテーマをパラメータとして受け取り、そのテーマを使用して独自のスタイルをすべて定義し、テーマをそのコンポーネントのいずれかに適用します。たとえば、ライブラリには独自の_theme.scssファイルを使用するすべてのアプリケーションがインポートできます。これにより、ミックスインが定義されます。

@import '~@angular/material/theming';
@import './components/my-component/_my-component-theme'; // component theming file with mixin
@mixin library-theme($theme) {

    @include angular-material-theme($theme); // angular material

    @include my-component-theme($theme); // component theming

    // define non-component styles
}

使用するアプリケーションは、ライブラリのテーマファイルをインポートし、独自のテーマを作成してから、ライブラリのテーマミックスインを呼び出す必要があります。

明らかに詳細がありますが、それらは基本です。参考までに、GitHubでAngular Materialがどのように機能するか theming ）を確認することをお勧めします。

1
G. Tranter