自分のコンポーネントに角度のある素材の色を使用する

Question

テーマに定義されている色で素材2でない要素をスタイルしたい場合は、標準的な方法は何ですか？

コンポーネントにh1というタグがあり、その色をprimary colorとしたいとします。私は

@import '~@angular/material/theming'; 
@include mat-core(); 
$color-primary: mat-palette($mat-blue); 
$color-accent: mat-palette($mat-amber, A400, A200, A500); 
$color-warn: mat-palette($mat-red); 
$theme: mat-light-theme($color-primary, $color-accent, $color-warn); 
@include angular-material-theme($theme); 

：私はtheme.scssとstyles.scss

theme.scssを持っている現時点で

h1{ 
    color: $color-primary; 
} 

：私はこのようなことを行うことができるようにしたいと思います輸入できるものはcomponent.scssでtheme.scssですが、state not to do so：

mat-core（）sass mixinをインポートします。これには、複数のコンポーネントによって使用されるすべての一般的なスタイル が含まれます。これはアプリケーションに一度だけ含める必要があります。 このミックスインが複数回含まれている場合、 アプリケーションはこれらの共通の スタイルの複数のコピーで終了します。

Answer 1

これは、カスタムテーマを複数のファイルに分割することで解決できると思います。たとえば、私は_mat-colors.scssと_mat-theme.scssです。 _mat-colorsには、必要な3つの色変数が含まれています。 _mat-themeは_mat-colorsを使用し、私はパレットを定義し、マットコアを含めます。その後、_variablesまたは_colorsファイルを持っているようにそれを使用することができます：あなたは、その後$color-redを使用するか、または必要に応じてユーザーが定義することができ、他の

@import '@angular/material/theming'; 
@import './mat-colors'; 

$color-red: mat-color($my-warn-palette); 

。