角度自定义 css 类未在视图中附加

Question

我正在研究 Angular Formio，因为我正在使用自定义 css 类，名称CustomCSS我在 css 文件中添加了相同的名称，如下所示这是堆栈闪电战应用程序组件.scss.CustomCSS {    margin: auto;  width: 50%;  border: 3px solid rgb(1, 248, 1);  padding: 10px;    background-color: coral;  }应用程序组件.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)}    );    }}应用程序组件.html<formio [refresh]="triggerRefresh" [form]="form" [submission]="submission" (submit)="onSubmit($event)"></formio>我的Htmlthis.form脚本如下{   "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}在我的脚本中，CSS 类名也可用，但它没有附加在视图中。

Answer 1

使其在您的组件中工作的一种可能方法是修改该组件的样式封装。

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

})

话虽如此。

我仍然建议使用全局样式并实现 css 选择器来定位 formio 生成的 html 元素，如您的示例所示：

#app formio .control-label {

  font-weight: bold;

}