web-dev-qa-db-ja.com

angularマテリアルテーマをcssプロパティでオーバーライドできません

私は使っている Angular 6.0.8 with Angular Material themeバージョン6.4.0

マテリアルテーマを少し変更しようとすると、CSSプロパティを上書きするマテリアルテーマプロパティが常に見つかるため、機能しません。

currentColor   .mat-input-element (material theme)
initial        input, textarea, select, button (user agent stylesheet)
#1072BA        .English
#1072BA        .English
#1072BA        body

最初のプロパティのみが適用されます（残りは打ち消されます）

これを解決するために複数のバリエーションを試しましたが、うまくいきませんでした（重要なものを使用したり、テーマのインポート順序を変更したりするなど）

では、マテリアルテーマとユーザースタイルシートの小さなものを変更する適切な方法は何ですか？ （たとえば、この英語のルールを適用するため）

私のstyles.scssは次のとおりです。色やフォントなど、マテリアルテーマをオーバーライドするものだけが機能します。

@import '~@angular/material/prebuilt-themes/Indigo-pink.css';

/* You can add global styles to this file, and also import other style files */

/* prevent clicking in the wizard nav header */
.mat-horizontal-stepper-header{
  pointer-events: none !important;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(./assets/material_icons/material_icons.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  Word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.mat-radio-button{
  margin: 10px;
}

.mat-checkbox{
  margin-bottom: 10px;
}

.Done-numbers{
  color: red;
  font-weight: bold;
}

.finInfo-hint{
  color: gray;
}

.finInfo-success{
  color: green;
}

.Arabic {
  font-family: "AXtManal" !important;
  margin: 0;
  /* background: #fff; */
  font: normal 16px/20px Verdana;
  color: #1072BA;
  text-shadow: 0 0 0 #1072BA;
}

.English {
  font-family: "Rotis" !important;
  margin: 0;
  /* background: #fff; */
  font: normal 16px/20px Verdana;
  color: #1072BA;
  text-shadow: 0 0 0 #0078be;
}

更新1：

チェックしてください このstackblitzの例 、問題は非常に明確です

1-アラビア語クラスで囲むdivがfont＆color含まれているマテリアルフォームフィールドのうち、そうではありません（Sushiの最初のフィールドと同様に、フォントは変更されません）

すべての要素が英語またはアラビア語のngClassでdivに囲まれているため、これは非常に重要です。マテリアルフォームフィールドを含むすべての囲まれた要素にクラスを適用したいと思います。

2-すべてのフォームラベルの色を青から赤または緑に変更するにはどうすればよいですか？

cssangularangular6angular-material2angular-material-6
4
Ahmed Elkoussy

これをチェックしてください 最小限の例 （この例を機能させるには、font-familyを調整する必要がありました）。

フォントスタイル定義の一部を上書きしています。次の調整された_.Arabic_定義のように、font-family、-size、-weightをすべて個別に定義します。

_.Arabic {
  font-family: 'Shadows Into Light', cursive;
  margin: 0;
  /* background: #fff; */
  font-size: 16px/20px;
  font-weight: normal;
  color: red;
  text-shadow: 0 0 0 #1072BA;
}
_

または、次の変更された例のように、省略形の宣言を使用してフォントプロパティを設定します。

_.English{
  margin: 0;
  /* background: #fff; */
  font: normal 16px/20px 'Pacifico', cursive;
  color: green;
  text-shadow: 0 0 0 #0078be;
}
_

編集

あなたのコメント/編集された質問に答えるには：

計算された値でフォントを見つけましたが、それは打ち抜かれ、適用されません。マットフォームフィールドに特にクラスを適用した場合にのみ適用されます。

Prebuilt-themes/Indigo-pink.css内でクラスが明示的に定義されているため、クラスを変更する場合は、クラスを_.mat-form-field_に明示的に適用する必要があります。

_.mat-form-field{
    font-size:inherit;
    font-weight:400;
    line-height:1.125;
    font-family:Roboto, "Helvetica Neue",sans-serif
}
_

ラベルの色も同じです。

CSSでは、常に少なくとも既存のスタイル定義と同じくらい具体的である必要があります。

あなたはこれを行うことができます：

_.Arabic .mat-form-field,.mat-form-field-appearance-legacy .mat-form-field-label,
.mat-input-element,.mat-form-field.mat-focused .mat-form-field-label{
  font-family: 'Shadows Into Light', cursive;
  margin: 0;
  /* background: #fff; */
  font-size: 16px/20px;
  font-weight: normal;
  color: red;
  text-shadow: 0 0 0 #1072BA;
}
.Arabic .mat-form-field.mat-focused .mat-form-field-ripple{
  background-color: red
}
_

しかし、それはあまりいいことではないと思います。より良い解決策は、言語ごとに1つずつ、2つの カスタムテーマ を作成し、そこに色とフォントを設定することです。このようにして、色とフォントの定義がネストされた要素に自動的に適用されます。 このガイド カスタムテーマに関する良い読み物です。

編集2：angularマテリアルテーマ

以前の編集で述べたように、カスタムテーマを作成することは、問題のより良い解決策になる可能性があります。 angularマテリアルのカスタムテーマは非常に強力ですが、最初にかなり設定する必要があります。その後、色やフォントなどを調整するのは数行の問題です。

new stackblitz を作成しました。ここでは、デフォルトと2つのカスタムテーマの設定、およびmaterial-form-fieldの色とフォントの調整を確認できます。すべてのセクションにコメントしましたが、ここでも簡単に説明します。

_styles.scss_の一般的な構造は次のようになります。

  • 必要なangularマテリアルミックスインのインポート
  • フォントの定義
  • カスタムコンポーネントテーマの定義/インポート
  • デフォルトのテーマを定義する
  • 他のすべてのカスタムテーマを定義する

_@import '~@angular/material/theming';_をインポートした後、フォントの調整を開始できます（必要に応じて）。これを行うには、新しい_mat-typography-config_を定義する必要があります。例：

_$arabic-typography: mat-typography-config(
  $font-family: '"Shadows Into Light", cursive'
);

$english-typography: mat-typography-config(
  $font-family: '"Pacifico", cursive'
);
_

これらのfont-configを適用するには、必要なものを_mat-core_- mixinに適用し、残りを@include mat-core($english-typography);で処理します。ここで、font-configを特定のカスタムテーマにのみ適用する場合は、テーマ定義内にfont-configを追加する必要があります。

テーマは次の構造で定義されます。mat-light-theme-mixinを使用して、目的のメインカラーとテーマを定義します。テーマを適用するには、@include angular-material-theme(<theme name>);を使用します

_$app-primary: mat-palette($mat-Indigo);
$app-accent:  mat-palette($mat-amber, A200, A100, A400);
$app-warn:    mat-palette($mat-red);
$app-theme:   mat-light-theme($app-primary, $app-accent, $app-warn);
@include angular-material-theme($app-theme); 
_

複数のテーマの設定を実現するには、次のようにテーマ定義をCSSクラス名でラップします。

_.Arabic {
    $arabic-primary: mat-palette($mat-orange);
    $arabic-accent:  mat-palette($mat-blue, A200, A100, A400);
    $arabic-warn:    mat-palette($mat-red);
    $arabic-theme:   mat-light-theme($arabic-primary, $arabic-accent, $arabic-warn);
    @include mat-core($arabic-typography);
    @include angular-material-theme($arabic-theme);
}
_

現在、_.Arabic_テーマは、html要素が_.Arabic_クラスの要素の子孫である場合にのみ適用されます。さらに、_$arabic-typography_を_$arabic-theme_に適用するようにテーマエンジンに指示する@include mat-core($arabic-typography);を追加しました。

スタイリングを実現するための最後のステップは、マットフォームフィールドを必要に応じてスタイリングするカスタムコンポーネントテーマを定義することです。これは今では数行の問題です：

_@mixin my-custom-component($theme) {
  // retrieve variables from current theme 
  $primary: map-get($theme, primary);

  // style element
  mat-form-field, .mat-form-field-appearance-legacy .mat-form-field-label {
    color: mat-color($primary);
  }
}
_

次に、このカスタムコンポーネントテーマは、各テーマ定義に行@include custom-components-theme(<theme name>);を追加することにより、カスタムテーマに追加されます。 （custom-components-themeは小さなヘルパー関数です。stackblitzで詳細をお読みください）。

それでおしまい。さらにコンポーネントを調整する必要がある場合は、そのコンポーネントのカスタムテーマを作成し、それをcustom-components-themeミックスインに追加するだけです。

5
coreuter

Angular Material styleをオーバーライドしようとしている場合は、deepで実行できます。

その前のパラメータは次のようになります。

::ng-deep .mat-step-header .mat-step-icon {
  background-color: #f6871f;
}
1
M. Doe

通常、マテリアルスタイリングライブラリを使用した場合、それらは非常に高い特異性でスタイリングされます。ブラウザで要素を調べると、スタイルが適用される順序がわかります。ここのように、上記でより指定されたプロパティのために、いくつかのプロパティが上書きされていることがわかります。

example

スタイルが優先度キューに戻りすぎていないかどうかを確認します。それらがまったくない場合は、インポートに問題があります。

0
Kristoffer Lund