custom styles in component appear to have no effect

[matthewhegarty]

Not sure why this is - might not be an ngselect issue:

@Component({
    selector: 'single-demo',
    template: `
  <ng-select [allowClear]="true"
              [items]="items"
              [disabled]="disabled"
              (data)="refreshValue($event)"
              (selected)="selected($event)"
              (removed)="removed($event)"
              (typed)="typed($event)"
              placeholder="No city selected">
  </ng-select>
`,
    styles: [`
.btn-default { 
     color: #000;
}
`]
})

styleUrls does not work either. Overriding the style in a separate stylesheet does workaround the issue.

[sublime392]

I ran into this. See: angular doc

Basically add encapsulation: ViewEncapsulation.None to your component, or use \deep\ in css like .my-select /deep/ .ui-select-match-text {