无法使用我的 css 属性覆盖有角度的材质主题 [英] Can't override the angular material theme with my css properties

问题描述

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

I am using Angular 6.0.8 with Angular Material theme version 6.4.0

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

Whenever I try to slightly modify the material theme, it never works, as I always find the material theme properties to overwrite my CSS properties as follows:

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

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

Only the first property is applied (the rest are striked through)

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

I have tried multiple variations to solve this but none worked (like using important or changing the order of importing the themes)

那么在material主题中改变小东西的正确方法是什么?用户样式表?(例如应用此英语规则)

So what is the proper way to change small things in the material theme & the user stylesheet? (to make this English rule applied for example)

我的 styles.scss 如下所示，只有覆盖了 Material 主题(如颜色和字体不起作用:

My styles.scss is as follows, it works well only what overrides the Material theme like colors & fonts does not work:

@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 示例 ，问题在里面很清楚

Please check out this stackblitz example , the problem is very clear in it

1- 我期望带有 阿拉伯语类 的封闭 div 会改变 字体 &包含的材料表单字段的颜色但它没有(就像寿司的第一个字段一样，字体没有改变)

1- I am expecting that the enclosing div with the Arabic class shall change the font & color of the contained material form fields but it doesn't (like the first field with Sus font is not changed)

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

This is very important as all elements are enclosed in a div with ngClass that have either English or Arabic & I want to apply the class to all enclosed elements including the material form fields

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

2- How to change the color of all the form labels from the blue to red or green ?

推荐答案

请查看此最小示例(我必须调整字体系列才能使这个示例工作).

Please check out this minimal example (I've had to adjust the font-family to make this example work).

您正在覆盖一些字体样式定义.分别定义您的 font-family、-size 和 -weight，如以下调整后的 .Arabic 定义:

You're overwriting some of your font style definitions. Either define your font-family, -size and -weight all separately like in the following adjusted .Arabic definition:

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

或者像这个修改后的例子一样使用速记声明设置字体属性:

Or set the font properties with the shorthand declaration like in this modified example:

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

编辑

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

Edit

To answer to your comment / edited question:

我在计算值中找到了字体，但它被删除了未应用，仅当我专门将课程应用于mat-form字段

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 中它被明确定义为

You have to apply the class explicitly on .mat-form-field if you want to change it because within the prebuilt-themes/indigo-pink.css it's defined explicitly as

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

标签颜色相同.

对于 CSS，您始终必须至少与现有的样式定义一样具体.

With CSS you always have to be at least as specific as the already existing style definition.

你可以这样做:

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

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

But that's not very nice I think. Better solution would be to create two custom themes, one for each language and set the colors and fonts there. This way your color and font definitions will apply to the nested elements automatically. This guide is a good read regarding custom themes.

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

As mentioned in my previous edit, creating custom themes might be the better solution for your problem. Custom themes in angular material are quite powerful, however you need to set up quite a bit first. After that it's just a matter of a few lines to adjust the color, fonts etc.

我创建了一个新的stackblitz，您可以在其中查看设置一个默认主题和两个自定义主题，以及material-form-field的颜色和字体的调整.我已经评论了每个部分，但我也会在这里简要解释一下:

I've created a new stackblitz where you can see the set up of a default and two custom themes and the adjustment of color and fonts of the material-form-field. I've commented every section but I'll briefly explain here as well:

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

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

导入 @import '~@angular/material/theming'; 后，您可以开始调整字体(如果您愿意).为此，您只需要定义一个新的 mat-typography-config 例如:

After you've imported @import '~@angular/material/theming'; you can start adjusting the fonts (if you wish). To do so, you just need to define a new mat-typography-config e.g.:

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

To apply those font-configs you need to and them over to the mat-core-mixin which takes care of the rest: @include mat-core($english-typography);. Now, if you only want to apply your font-config to a specific custom theme, you have to add your font-config within the theme definition.

主题由以下结构定义:使用 mat-light-theme-mixin 定义所需的主色和主题.要应用主题，请使用 @include angular-material-theme();

A theme is defined by the following structure: define your desired main colors an the theme by using the mat-light-theme-mixin. To apply the theme, use @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 类名称中，如下所示:

To achieve your multiple theme setup, you can wrap a theme definition within a CSS-class name like so:

.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 类的元素的后代时才应用.此外，我添加了 @include mat-core($arabic-typography); ，它告诉主题引擎将 $arabic-typography 应用到 $阿拉伯主题.

Now, the .Arabic theme is only applied if your html elements is a descendant of an element with the .Arabic class. Additionally I've added @include mat-core($arabic-typography); which tells the theme engine to just apply the $arabic-typography to the $arabic-theme.

完成样式的最后一步是定义自定义组件主题，该主题可根据需要对 mat-form-field 进行样式设置.现在只需几行即可:

Final step to accomplish your styling is to define a custom component theme which styles the mat-form-fields as desired. This is now a matter of a few lines:

@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(); 行添加到每个主题定义，将此自定义组件主题添加到您的自定义主题中.(custom-components-theme 是一个小辅助函数.在 stackblitz 中阅读更多相关信息).

This custom component theme is then added to your custom themes by adding the line @include custom-components-theme(<theme name>); to each theme definition. (custom-components-theme is a little helper function. Read more about it in the stackblitz).

就是这样.如果需要调整更多组件，只需为该组件创建自定义主题并将其添加到 custom-components-theme 混入中即可.

That's it. If you need to adjust more components, you just have to create a custom theme for that component and add it to the custom-components-theme mixin.

这篇关于无法使用我的 css 属性覆盖有角度的材质主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！