Angular 材质 - 在特定的垫子扩展面板上设置边框颜色

Question

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

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>

ts

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

我该如何解决？

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