cannot customize style of ng-select in Angular

Hi. I try to change the style of (ng-select) . I paste the revised style to the component style where ng-select is located.

    ng-select > div {
      border: 0!important;
      outline: none;
    }
    ng-select > div > div.single > div.toggle {
      color: #2ebaee!important;
    }
    ng-select > div > div.single > div.placeholder {
      text-align: center;
    }
    select-dropdown > div .filter {
      display: none;
    }

But it does not work. I inspect element on developer tools and see no my revised style. Interesting is when I paste the style to Angular Global stlye.scss . It works but it does not suit my me because it overrides all ng-select in my project. How to achieve changing design of ng-select in component? Thanks in advance!

[vugar005]

solved this problem by adding a class to ng-select such as custom. Then in styles.scss

ng-select.custom > div { border: 0!important; outline: none; } ng-select.custom > div > div.single > div.toggle { color: #2ebaee!important; } ng-select.custom > div > div.single > div.placeholder { text-align: center; }

So again you need add those style to global styles.scss but this time it does not overwrite all ng-selects.

[istibekesi]

Using ::ng-deep in parent component should work: For example, adding box-shadow on focus:

ng-select ::ng-deep .focus {
  border-color: #1268ff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 53, 145, 0.25);
}

However, I’m still wondering if is there any better approach for customizing the style.