Angular Material - 在特定的 mat-expansion-panel 上设置边框颜色答案

【问题标题】：Angular Material - Set border color on a specific mat-expansion-panelAngular Material - 在特定的 mat-expansion-panel 上设置边框颜色
【发布时间】：2020-05-18 05:32:13
【问题描述】：

我想更改具有特定类的垫子扩展面板的边框颜色和宽度。

html

<div>
  <mat-accordion>
    <mat-expansion-panel *ngFor="let item of itemList; let i=index"
                        [hideToggle]="true"
                        [class.selected]="item.selected">
      <mat-expansion-panel-header>
        <mat-panel-title>{{item.header}}</mat-panel-title>
      </mat-expansion-panel-header>
      {{item.content}}
    </mat-expansion-panel>
  </mat-accordion>
</div>

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

interface Item {
  header: string;
  content: string;
  selected: boolean;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    public itemList: Item[] = [
    {
      header: 'Item1',
      content: 'This is item1.',
      selected: false,
    },
    {
      header: 'Item2',
      content: 'This is item2.',
      selected: true,
    }
  ];

}

css

.selected { 
  border-width: 2px;
  border-color: red;
}

我想将Item2 的边框颜色设置为红色，宽度为 2px。但是上面的例子不起作用。

StackBlitz

我该如何解决？

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

还需要设置边框的border-style。

.selected { 
  border-style: solid;
  border-width: 2px;
  border-color: red;
}

甚至更好：

.selected { 
  border: solid 2px red;
}

这是 StackBlitz 的更改。

如果您实际上只想设置底部边框的样式，请使用：

.selected { 
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: red;
}

或者：

.selected { 
  border-bottom: solid 2px red;
}

【讨论】：