[英]Angular change focus color for mat-label inside mat-form-field
I have a mat-chip-list inside a mat-form-field like in the second example: https://material.angular.io/components/chips/overview .我在第二个示例中的 mat-form-field 中有一个 mat-chip-list: https ://material.angular.io/components/chips/overview。 When clicking inside, the mat-label and the border-bottom (I think it's border bottom) get focused and changes the color.
单击内部时,垫标签和边框底部(我认为它是边框底部)会聚焦并更改颜色。 How can I modify this colors?
我怎样才能修改这个颜色? Default is an angular theme color, but I would like to change this.
默认是角度主题颜色,但我想更改它。
<mat-form-field class="example-chip-list" appearance="fill">
<mat-label>Favorite Fruits</mat-label>
<mat-chip-list #chipList aria-label="Fruit selection">
<mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">
{{fruit.name}}
<button matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
I tried but didn't work:我试过但没有奏效:
mat-label:focus{
color: red
}
Founded this solution: Change color of matInput , but I would like to don't use important.建立了这个解决方案: 改变 matInput 的颜色,但我不想使用重要的。
If you want to change the color of any mat component without using ::ng-deep or the !important add the css to a global style sheet.如果您想在不使用 ::ng-deep 或 !important 的情况下更改任何 mat 组件的颜色,请将 css 添加到全局样式表中。
Like this in your case.就像你的情况一样。 global.scss:
全局.scss:
.mat-focused .mat-form-field-label {
/*change color of label*/
color: red;
}
Here's how to create a global stylesheet just incase: https://www.tektutorialshub.com/angular/angular-global-css-styles/以下是创建全局样式表的方法: https ://www.tektutorialshub.com/angular/angular-global-css-styles/
Also read through this: https://material.angular.io/guide/customizing-component-styles另请阅读: https ://material.angular.io/guide/customizing-component-styles
Additionally ::ng-deep is now deprecated so it's a good practice to avoid using ::ng-deep and rather using global stylesheets.此外 ::ng-deep 现在已弃用,因此最好避免使用 ::ng-deep 而使用全局样式表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.