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

Question

我正在使用 ngx-bootstrap“警报”组件。我想设置警报消息的样式，但将样式添加到 compnents .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;
}