4

バージョン6.4.0で使用Angular 6.0.8していますAngular Material theme

マテリアル テーマを少し変更しようとすると、次のように 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が、含まれているマテリアルフォームフィールドのフォントと色を変更することを期待していますが、そうではありません(寿司の最初のフィールドのように、フォントは変更されません)

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

2- すべてのフォーム ラベルの色を青から赤または緑に変更する方法は?

4

3 に答える 3