更改角材料的默认扩展面板箭头颜色 [英] Change default expansion panel arrow colour for angular material
本文介绍了更改角材料的默认扩展面板箭头颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个角度扩展面板,如下所示.如何将下方箭头的颜色更改为白色?
I have an angular expansion panel as shown below. How can i change the color of the arrow below to white?
我的代码(HTML):
My code (HTML):
<md-expansion-panel>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
我的代码 (TS):
import {Component} from '@angular/core';
/**
* @title Basic expansion panel
*/
@Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}
推荐答案
工作代码如下:
<md-expansion-panel>
<md-expansion-panel-header class="specific-class">
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
import {Component} from '@angular/core';
/**
* @title Basic expansion panel
*/
@Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
styles: [`
::ng-deep .specific-class > .mat-expansion-indicator:after {
color: white;
}
`],
})
export class ExpansionOverviewExample {}
说明:
为了覆盖动态应用的内置组件样式您需要为您的选择器增加 CSS 特异性.那是添加额外的 CSS 类 specific-class 的原因.如果你将使用选择器 ::ng-deep .mat-expansion-indicator:after扩展组件将覆盖它.
In order to override built-in component styles applied dynamically you need to increase CSS specificity for your selector. That's the reason for adding additional CSS class specific-class. If you gonna use selector ::ng-deep .mat-expansion-indicator:after expansion component will override it.
这篇关于更改角材料的默认扩展面板箭头颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文