Soy nuevo en Angular y Bootstrap
En realidad tengo esto en mi navegador:
Código del navegador a través de inspeccionar
y esto en mi codigo
<ng-template #newSlaVmData let-modal> <div class="modal-header modal-slaVMData"> <h4 class="modal-title" id="modal-basic-title"> Add </h4> <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> <span aria-hidden="true"> × </span> </button> </div>Como puede ver, algunos códigos son generados por Bootstrap.
Quiero saber cómo puedo cambiar el CSS de "modal-dialog" (código del navegador)?
Probé diferentes métodos, como agregar esta clase en mi archivo SCSS, pero no funcionó.
Yo uso estas dependencias:
"@ng-bootstrap/ng-bootstrap": "^9.1.3" "bootstrap": "^4.6.0",Debe usar ::ng-deep pseudo-class para deshabilitar la encapsulación de vista. Agregue esto a su archivo .scss:
::ng-deep .modal-dialog { margin-top: 100px; width: 500px; }simplemente puede sobrescribir las clases utilizadas por bootstrap, así:
.modal-dialog { background-color: black; }es importante cargar su archivo css después del bootstrap css
Puede agregar estilo después de la clase como
<div class="modal-dialog" style="color:white"></div>Esto anulará la clase de arranque.