I am trying to override the CSS of a shared component. I need to replace the CSS for hasData and containers. I tried to use ng:deep but it still doesn't seem to override it. I want to change the class to hasData badge badge.. instead of badge badge.. on the span element. However I still want to keep the badge properties and add some additional styles to it. What am I doing wrong?

<shared-component
  [className]="test.hasDataId ? 'hasData' : 'containers'"
  *ngIf="dataItem.test"
  [hasData]="dataItem.test.hasDataId"
  [containers]="dataItem.test.parentTest"
  (testClick)="test($event)"
>

The output I am getting:

<shared-component 
  _nghost-iny-c569="" 
  class="hasdata" 
  ng-reflect-has-contents="true" 
  ng-reflect-containers=""
>
  <span 
  _ngcontent-iny-c569="" 
  kendotooltip="" 
  class="badge badge-primary mr-2 ng-star-inserted" 
  title="" 
  data-title="testtest"
  >
    Has Data
  </span>
</shared-component>

my CSS:

:host ::ng-deep .hasData  {
  cursor: pointer;
  width: 90%;
  font-size: 80%;
  background-color: grey;
}