我可以从组件.css文件中设置ngx-bootstrap元素的样式吗？

Question

我正在使用ngx-bootstrap“警报”组件。而且我想设置警报消息的样式，但是将样式添加到组件.css文件不会执行任何操作。

问题-ngx-bootstrap说要在下面进行样式设置，但是我想知道是否可以从组件.css文件中完成它？

https://valor-software.com/ngx-bootstrap/#/alerts#local-styling

styles: [
    `
  :host >>> .alert-md-local {
    background-color: #009688;
    border-color: #00695C;
    color: #fff;
  }
  `
  ]

实施例

.alert {
  border-radius: 0px !important; // doesn't do anything
  margin-bottom: 0px !important; // doesn't do anything
}

<alert [type]="alert.type" [dismissible]="dismissible" [dismissOnTimeout]="alert.timeout" class="text-center" style="margin-bottom: 0px;">{{ alert.msg }}</alert>

Answer 1

您可以使用ng-deep。尽管在docs中提到它将很快被弃用，但针对相同的替代解决方案仍存在很多讨论。这是GitHub issue。

目前，ng-deep仍然有效。

:host ::ng-deep .alert {
    border-radius: 0px;
    margin-bottom: 0px;
}