更改角材料的默认扩展面板箭头颜色 [英] Change default expansion panel arrow colour for angular material

查看:24
本文介绍了更改角材料的默认扩展面板箭头颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个角度扩展面板,如下所示.如何将下方箭头的颜色更改为白色?

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.这允许解决视图封装.

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆