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?

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>

My code (TS):

import {Component} from '@angular/core';

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}

回答1:

Working code is below:

<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 {}

Explanation:

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.
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.

回答2:

its works for me in this way

Html

<mat-accordion>
        <mat-expansion-panel class="specific-class"> 
          <mat-expansion-panel-header>
            <a mat-button>Lorem ipsum dolor sit amet.</a>
          </mat-expansion-panel-header>
          <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, placeat.</li>
          </ul>
        </mat-expansion-panel>
      </mat-accordion>

Css

/deep/ .mat-expansion-indicator::after, .mat-expansion-panel-header-description { color: red;}

回答3:

this works on me 2018

html file

<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>

styles.css

.specific-class > .mat-expansion-indicator, .mat-expansion-indicator:after {
  color: red !important;
}

回答4:

You can simply add it to your global styles.css file. Works for me atleast in version 7.2.

.mat-expansion-indicator::after {
  color: green;
}

回答5:

you can directly go to material.scss in your app if you have installed angular material using npm and change the color of the arrow with class .mat-expansion-indicator:after.

来源：https://stackoverflow.com/questions/46540080/change-default-expansion-panel-arrow-colour-for-angular-material

标签

angular

angular-material2