Могу ли я стилизовать свой элемент ngx-bootstrap из моего файла компонентов .css?

Question

Я использую компонент ngx-bootstrap 'alert'. И я хотел бы стилизовать предупреждающее сообщение, но добавление стилей в файл .css compnents ничего не делает.

question - 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 для этого. Хотя в документах упоминается, что это скоро будет признано устаревшим, ведется много дискуссий о хорошем альтернативном решении для того же. Вот проблема GitHub .

На данный момент ng-deep все еще работает.

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