无法使用我的CSS属性覆盖角度材质主题 [英] Can't override the angular material theme with my css properties
问题描述
我在Angular Material theme版本6.4.0中使用Angular 6.0.8
每当我尝试稍微修改材质主题时，它都将失效，因为我总是会找到材质主题属性来覆盖我的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:
请查看此stackblitz示例，问题很明显
1-我希望带有阿拉伯语类的div会更改 font& 包含的材料表单字段的颜色，但颜色不变(就像第一个包含Sushi的字段一样，字体不变)
这非常重要，因为所有元素都包含在ngClass的div中，该div具有英语或阿拉伯语&我想将该类应用于包括材料表格字段在内的所有封闭元素
2-如何将所有表单标签的颜色从蓝色更改为红色或绿色?
请查看此最小示例(我必须调整字体系列才能使此示例正常工作).
您正在覆盖某些字体样式定义.分别定义您的字体系列，-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
}
但是我认为那不是很好.更好的解决方案是创建两个自定义主题，一个用于每种语言并在那里设置颜色和字体.这样，您的颜色和字体定义将自动应用于嵌套元素. 此指南是有关自定义的很好的阅读材料主题.
角材料主题
如我先前的编辑中所述，创建自定义主题可能是解决您的问题的更好解决方案.角形材质中的自定义主题功能非常强大，但是您需要首先进行一些设置.之后，只需几行即可调整颜色，字体等.
我创建了一个新的stackblitz ，您可以在其中看到设置一个默认主题和两个自定义主题，以及调整材料表单字段的颜色和字体.我已经评论了每个部分，但我也会在这里进行简要说明:
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.
I am using Angular 6.0.8 with Angular Material theme version 6.4.0
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)
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)
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;
}
Update 1:
Please check out this stackblitz example , the problem is very clear in it
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 Sushi, font is not changed)
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- 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).
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:
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
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
}
same for the label color.
With CSS you always have to be at least as specific as the already existing style definition.
You could do this:
.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.
EDIT 2: angular material theming
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.
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:
The general structure of your styles.scss should be:
- importing the required angular material mixins
- defining the fonts
- defining/importing custom component themes
- defining a default theme
- defining all other custom themes
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'
);
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.
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);
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);
}
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.
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);
}
}
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).
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屋！
