更改角度材质的默认扩展面板箭头颜色

Question

我有一个角度扩展面板，如下所示。如何将下面箭头的颜色更改为白色？

我的代码（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 {}

Answer 1

工作代码如下：

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

2. 为了覆盖动态应用的内置组件样式 您需要增加选择器的CSS 特异性。那是 添加额外 CSS 类special-class的原因。如果你 将使用选择器 ::ng-deep .mat-expansion-indicator:after 扩展组件将覆盖它。

Answer 2

您不必使用 ng-deep。相反，您可以将此代码添加到样式表中：

.mat-expansion-panel-header-description, 
.mat-expansion-indicator::after {
    color: white;
}

请参阅 GitHub 文档 https://github.com/angular/components/tree/master/src/material/expansion

Answer 3

它以这种方式对我有用

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

Answer 4

您只需将其添加到全局 styles.css 文件中即可。至少在 7.2 版本中对我有用。

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

Answer 5

对于“@角度/材料”：“^10.2.7”

您将

encapsulation: ViewEncapsulation.None

属性添加到您的

@Component

装饰器中

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None // <----
})

然后

.mat-expansion-panel-body {
  padding: 0 !important;
}

那么这个 CSS 无论有没有 !important 都可以正常工作

::ng-deep

和

/deep/

不适用于新版本的 angular/material

Answer 6

这对我有用

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

Answer 7

这对我有用 2018

html 文件

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

样式.css

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

Answer 8

如果您使用 npm 安装了 Angular Material，则可以直接转到应用程序中的material.scss，并使用 class .mat-expansion-indicator:after 更改箭头的颜色。

Answer 9

对我来说这就是有效的：

.mat-expansion-indicator::after{
    border-color: red;
}