igxTextHighlight directive uses inline styles

[DiyanDimitrov]

Description

The igxTextHighlight directive uses inline styles for the highlight and active highlight colors. In order to override them when setting cssClass and activeCssClass input properties you have to use !important.

<div igxTextHighlight
     [value]="html"
     [groupName]="'group1'"
     [containerClass]="'search-text'"
     cssClass="highlightClass"
     activeCssClass="activeHighlightClass"
     class="search-text">
    {{html}}
</div>

:host ::ng-deep .highlightClass {
    background: lightblue !important;
}

:host ::ng-deep .activeHighlightClass {
    background: lawngreen !important;
}

• igniteui-angular version: 7.3.x
• browser: NA

Result

It is difficult to re-style the highlight and active highlight colors.

Expected result

We should not use inline styles in the igxTextHighlight.