angular custom css class is not appening in view

I am working on angular formio, in that I am using a custom css class, name CustomCSS I have added the same in css file as follows

Here is stackblitz

app.component.scss

.CustomCSS {
    margin: auto;
  width: 50%;
  border: 3px solid rgb(1, 248, 1);
  padding: 10px;
    background-color: coral;
  }

app.component.ts

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent implements OnInit {

ngOnInit() {
    debugger;
    this.triggerRefresh = new EventEmitter();
    this.http.get('http://....')
    .subscribe(
      response  => {
        this.form = response.json();// this is my html script from DB
      },
        err => {console.error(err)}
    ); 

   }
}

app.component.html

<formio [refresh]="triggerRefresh" [form]="form" [submission]="submission" (submit)="onSubmit($event)"></formio>

My Html this.form script as follows

{
   "components":[
      {
         "label":"City",
         "widget":"choicesjs",
         "customClass":"CustomCSS",
         "tableView":true,
         "data":{
            "values":[
               {
                  "label":"abc",
                  "value":"abc"
               ]
         },
         "selectThreshold":0.3,
         "calculateServer":false,
         "validate":{
            "required":true
         },
         "key":"city",
         "type":"select",
         "indexeddb":{
            "filter":{

            }
         },
         "input":true
      },
      {
         "type":"button",
         "label":"Submit",
         "key":"submit",
         "disableOnInvalid":true,
         "input":true,
         "tableView":false
      }
   ],
   "id":4
}

In my script also the css class name available but it is not appending in the view.

One possible way to make it work from your component is to modify the style encapsulation for that component.

import { Component, OnInit, ViewEncapsulation } from '@angular/core'; // <-- add ViewEncapsulation 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None // <-- add this line
})

More information on encapsulation.

That being said.

I still recommend to use global styles and implement css selectors to target formio generated html elements like in your example:

#app formio .control-label {
  font-weight: bold;
}