Title: Angular 12 181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16ng-deep (deprecated)? Only option that's working?
Tags: angular;angular12
Question: I am trying the change the text in ngx-charts and this works:
```181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16ng-deep .ngx-charts { 
    text{
        fill: #ff0000; 
    }
}
```
The only issue is that ```181a:6c1c:918f:f3a4:2e8c:61d6:1a08:6b16ng-deep``` is deprecated?
```:host``` will not work
So what do I use instead that works?


Here is the accepted answer: You'll likely have to apply this style at a global level in styles.[s]css or a file that gets imported in styles.[s]css/bundled when bundling your other global css.
(I usually path it directly from my component, ex:)
```app-my-component-that-uses-this-chart {
  .ngx-charts {
    text {
       fill: #ff0000;
    }
  }
}
```
But you can also apply a class instead of a component name to make it more reusable



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:09/29/21', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<angular><angular12>', 'Title': "Angular 12 ::ng-deep (deprecated)? Only option that's working?", 'ViewCount': 435, 'id': 69374000, 'user_AboutMe': None, 'user_AccountId': 21202012.0, 'user_DisplayName': 'Wain2021', 'user_Reputation': 249.0, 'user_Views': 23.0, 'user_id': 15592461.0}}