Question

我正在将Angular 6.0.8与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 如下，它仅在覆盖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-我希望带有阿拉伯语类的div会更改所包含材料表单字段的 font＆color ，但不会（例如Sushi的第一个字段，字体不变）

这非常重要，因为所有元素都包含在具有英语或阿拉伯语的ngClass的div中，我想将该类应用于包括材料形式字段在内的所有封闭元素

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

Answer 1

请检查此minimal example（为了使本示例正常工作，我必须调整字体系列）。

您正在覆盖某些字体样式定义。分别定义您的字体系列，-size和-weight，如以下调整后的.Arabic定义：

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

编辑

要回答您的评论/已编辑的问题：

我在计算值中找到了字体，但是它被删除了，并且不适用，仅当我将课程专门应用于垫形字段

如果要更改类，则必须在.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，每种语言分别创建一个This guide，并在那里设置颜色和字体。这样，您的颜色和字体定义将自动应用于嵌套元素。 new stackblitz是有关自定义主题的好书。

编辑2：角材料主题

如我先前的编辑中所述，创建自定义主题可能是解决您的问题的更好解决方案。角形材质中的自定义主题功能非常强大，但是您需要首先进行一些设置。之后，只需几行即可调整颜色，字体等。

我创建了一个{{3}}，您可以在其中看到默认设置和两个自定义主题，以及对材料形式字段的颜色和字体的调整。我已经评论了每个部分，但我也会在这里进行简要说明：

您的styles.scss的一般结构应为：

导入所需的角材料混合器
定义字体
定义/导入自定义组件主题
定义默认主题
定义所有其他自定义主题

导入@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);。现在，如果您只想将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);
}

现在，仅当您的html元素是带有.Arabic类的元素的后代时，才应用.Arabic主题。另外，我添加了@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。

Answer 2

如果您尝试覆盖角度材料样式，则可以使用 deep

它前面的参数是这样的：

/deep/ .mat-step-header .mat-step-icon {
  background-color: #f6871f;
}

Answer 3

通常，当我使用Material样式库时，它们的样式具有很高的特异性。如果您在浏览器中检查元素，则将看到应用样式的顺序。像这里一样，您会看到由于上面指定的属性更多而使某些属性被覆盖。

查看样式是否在优先级队列中太远。如果根本不存在，则导入有问题。

无法使用CSS属性覆盖角度材质主题

3 个答案:

编辑

编辑2：角材料主题