Как создать собственные стили для ng-select

Question

Как переопределить css для

&.ng-select-focused {
    &:not(.ng-select-opened) > .ng-select-container {
        border-color: $ng-select-highlight;
        box-shadow: $ng-select-box-shadow;
    }
}

В официальной документации сказано, что вам нужно добавить class="custom", а затем вы можете реализовать свои собственные стили, поэтому я попробовал это:

.ng-select.custom {
    &.ng-select-focused {
        &:not(.ng-select-opened) > .ng-select-container {
            border-color: red;
        }
      }
  }

но эффекта нет. Я сделал что-то не так?

Answer 1

Попробуйте добавить: :host ::ng-deep

Пример 1:

:host ::ng-deep .ng-select.custom {
    &.ng-select-focused {
        &:not(.ng-select-opened) > .ng-select-container {
            border-color: red;
        }
      }
  }

Пример 2:

.ng-select.custom ::ng-deep .ng-select-focused {
  &:not(.ng-select-opened) > .ng-select-container {
    border-color: red;
  }
 }