更改角度材料的默认扩展面板箭头颜色 [英] 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 {}

说明:

1. 为了设置Angular动态添加的嵌套元素的样式 您需要使用特殊选择器 :: ng-deep . 这样可以解决视图封装.

1. In order to style nested elements dynamically added by Angular Material component you need to use special selector ::ng-deep. That allows to work around view encapsulation.

为了覆盖动态应用的内置组件样式 您需要为选择器增加 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屋！