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

Posted 2023-02-18

【中文标题】更改角材料的默认扩展面板箭头颜色

【英文标题】：Change default expansion panel arrow colour for angular material

【发布时间】：2018-03-14 09:13:36

【问题描述】：

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

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

【参考方案1】：

这对我有用

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

【参考方案2】：

对于“@angular/material”：“^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

【参考方案3】：

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

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

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

【参考方案4】：

您可以简单地将其添加到您的全局 styles.css 文件中。至少在 7.2 版中对我有用。

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

【讨论】：

这对我有用，同时将encapsulation: ViewEncapsulation.None 添加到组件中。

【参考方案5】：

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

【参考方案6】：

它以这种方式对我有用

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;

【讨论】：

感谢 /deep/。我不知道，它允许我更改 .mat-expansion-indicator::after 的颜色

【参考方案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>

styles.css

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

【参考方案8】：

工作代码如下：

<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 

解释：

为了设置 Angular 动态添加的嵌套元素的样式 您需要使用特殊选择器::ng-deep 的材质组件。 这允许解决view encapsulation。

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

【讨论】：

看起来::ng-deep 已被弃用。有没有更好的方法来做到这一点？

您可以添加不在组件级别的样式： - 为目标组件提供特定的选择器 - 添加带有样式的自定义 CSS 文件 - 将此文件的链接添加到您的页面（在带有材质主题的 CSS 之后）。但是这种方法在我的 POV 中很容易出错。

Angular 9 更新：使用 border-color: white; 代替 color: white;

我相信 ">" 只是一个指标。