あなたの質問に答えるための十分な情報がありません。 (どのようにプロジェクトをビルドしますか?マテリアルコンポーネントのスタイルシートはどこに置いたのですか、Webpack、AngleCli、ロールアップ、または他のビルドツールなどを使用しますか?しかし、私はコメントできません(十分な評判がない)ので、私はそれを試してみましょう。
@Component
メタデータのstyleUrls
宣言を使用して、単一のアプリコンポーネントにスタイルシート(おそらくCSSまたはscss)を追加したようです。 Angularはデフォルトでコンポーネントのスタイルをカプセル化します。その場合、スタイルはアプリコンポーネントにのみ適用されます。
Blox Materialプロジェクトでは、通常、素材タグのスタイルシートをアプリケーション・ワイド・スタイルシートとして追加する必要があります。これは、scriptタグを介してhtmlに組み込まれています。プロジェクトがAngular-CLIプロジェクトの場合、これは.angular-cli.json
ファイルで指定されているように、アプリケーションの「スタイル」フィールドに指定されたファイルです。これはまた、Bloxマテリアルの入門ガイドで説明されています。https://blox.src.zone/material#/guides/gettingstartedを参照してください。
また、スタイルシートを複数のコンポーネントに同時に適用するには、スタイルシートをアプリケーションのルートコンポーネントに配置したり、encapsulation: ViewEncapsulation.None
というメタデータに含めて@Component
メタデータに追加することもできます。
これが解決しない場合は、もう少し情報を提供し、デベロッパーツールを使用してアプリコンポーネントに適用されるスタイル(およびセレクタ)を確認してください。それはおそらく彼らがあなたの他のコンポーネントに適用されない理由として手がかりを与えるでしょう。また、ブートストラップのような他のスタイルがマテリアルコンポーネントスタイルをオーバーライドしているかどうかを示します。
最後に、Blox Materialディレクティブが実際にボタンに適用されていることを確認します。mdcButtonは自動的に少なくともmdc-button
とmdc-ripple-upgraded
のスタイルを取得する必要があります。ボタンにこれらのスタイルが表示されない場合は、mdcButton
ディレクティブの適用方法に問題があります。