css - 无法使用我的 css 属性覆盖 Angular Material 主题

Question

我正在使用 Angular 6.0.8 和 Angular Material 主题 6.4.0 版

每当我尝试稍微修改 Material 主题时，它永远不会起作用，因为我总是发现 Material 主题属性会覆盖我的 CSS 属性，如下所示:

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

仅应用第一个属性(其余属性被删除)

我尝试了多种变体来解决这个问题，但都没有奏效(比如使用 important 或更改导入主题的顺序)

那么更改 Material 主题和用户样式表中的小东西的正确方法是什么？ (例如使这个英语规则适用)

我的 styles.scss 如下所示，只有覆盖 Material 主题(如颜色和字体)的效果不佳:

@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:

请查看this stackblitz example ，里面的问题很清楚

1- 我希望带有Arabic class 的封闭 div 会改变包含的 Material 表单字段的字体和颜色，但它不会(像寿司的第一个字段，字体没有改变)

这非常重要，因为所有元素都包含在带有 ngClass 的 div 中，它具有英语或阿拉伯语，我想将该类应用于所有包含的元素，包括 Material 表单字段

2- 如何将所有表单标签的颜色从蓝色更改为红色或绿色？

Answer 1

请查看此 minimal example (我必须调整字体系列才能使这个示例正常工作)。

您正在覆盖您的一些字体样式定义。像以下调整后的 .Arabic 一样分别定义您的字体系列、-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;
}

编辑

回答您的评论/编辑的问题:

I find the font in the computed values but it is striked through and not applied, it is only applied if I apply the class specifically on the mat-form field

您必须在 .mat-form-field 上显式应用该类如果你想更改它，因为在 prebuilt-themes/indigo-pink.css 中它被明确定义为

.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
}

但我认为这不是很好。更好的解决方案是创建两个 custom theme s，每种语言一个，并在那里设置颜色和字体。这样您的颜色和字体定义将自动应用于嵌套元素。 This guide是一本关于自定义主题的好书。

编辑 2: Angular Material 主题

正如我在之前的编辑中提到的，创建自定义主题可能是解决您的问题的更好方法。 Angular Material 中的自定义主题非常强大，但是您需要先进行一些设置。之后只需几行代码即可调整颜色、字体等。

我创建了一个 new stackblitz在这里你可以看到一个默认主题和两个自定义主题的设置以及material-form-field的颜色和字体的调整。我对每个部分都进行了评论，但我也会在这里简要解释一下:

你的styles.scss的一般结构应该是:

• 导入所需的 Angular Material 混合
• 定义字体
• 定义/导入自定义组件主题
• 定义默认主题
• 定义所有其他自定义主题

导入后 @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'
);

要应用那些你需要的字体配置，并将它们应用到 mat-core -mixin 负责其余的工作:@include mat-core($english-typography); .现在，如果您只想将字体配置应用于特定的自定义主题，则必须在主题定义中添加字体配置。

主题由以下结构定义:使用 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 的元素的后代时才应用主题类(class)。另外我添加了@include mat-core($arabic-typography);它告诉主题引擎只应用 $arabic-typography到 $arabic-theme .

完成样式的最后一步是定义自定义组件主题，根据需要对 mat-form-fields 进行样式设置。现在这是几行的问题:

@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 mixin。