如何摆脱所有宿主元素的“轮廓”？

Question

如果有人做类似的事情

<mat-card [routerLink]="[`item/${itemId}`]">
  <!-- Content -->
</mat-card>

该卡可以点击，但卡周围也会有轮廓。在我看来，我必须设置一种附加样式

<mat-card [routerLink]="[`item/${itemId}`]" [style.outline]="'none'">
  <!-- Content -->
</mat-card>

或

mat-card {
  outline: none;
}

将其删除。但是，如果我创建其他组件，这将变得很乏味，因为每次我想从外部将其设置为路由元素时，都必须设置outline: none;。

@Component({
  selector: 'another-card',
  styles: [`
    :host {
      outline: none;
    }
  `],
  template:`
    <div>
      <!-- Content -->
    </div>
  `
})
export class AnotherCardComponent {
}

我想知道是否有一种方法可以全局设置宿主元素的样式。

  

stackblitz