如何为 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;
  }
 }