Removing Orange background?

[sirwesley]

Issue:

I'm struggling to target and remove this background color of orange. Can this be defaulted to something a color that isn't so jarring on load? or at least a color that has something I can rhyme with? why was orange chosen here?

File Location:

./node_modules/ui-carousel/src/ui-carousel-item/ui-carousel-item.component.ts

.ui-carousel-item[_ngcontent-c#] {
    height: 100%;
    width: 100%;
    background: orange;
    position: absolute;
    overflow: hidden;
}

Possible Fixes

• If anyone could help me construct a targeted override of this component style then I'd accept that as a solution to my problem.
• I do see I could do a :host >>> div.ui-carousel-item override inside my TS component, however, I'd rather use my SCSS file than using the styles array there, and it doesn't look like I can use both, but could be wrong on that.
• I can target it in my SCSS file and change the background color using the /deep/ property + the class name with the !important tag, but I really don't want to use !important if at all possible:

  /deep/ .ui-carousel-item{
  background: white !important;
  }

*Note: New to anuglar5 so still trying to figure out exactly what's going on here, cause my standard way of doing SCSS isn't working out so well with all these inline component styles.

12 Pull Request Added

[msarsha]

/deep/ is depracated.

[sirwesley]

switched to ::ng-deep for the time being until there's a fix that lets me target this style property.