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

【问题标题】：Can I style my ngx-bootstrap element from my components .css file?我可以从我的组件 .css 文件中设置我的 ngx-bootstrap 元素的样式吗？
【发布时间】：2019-09-30 23:39:37
【问题描述】：

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

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

【问题讨论】：

试试alert { border... }没有点.因为<alert>不是一个类。详细了解 CSS 中的定位。
这是不正确的。 .alert 是一个属于该引导组件的类...了解 ngx-bootstrap 如何转换为合适的元素。

标签： html css angular ngx-bootstrap

【解决方案1】：

您可以为此使用ng-deep。尽管在docs 中提到它很快就会被弃用，但是关于同样的一个好的替代解决方案的讨论很多。这是 GitHub issue。

目前，ng-deep 仍然有效。

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

【讨论】：

好吧，根据我的 OP，我什至不需要 ::ng-deep，如上所示
我只是想看看有没有纯.css的解决方案