角度自定义 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;}