angular custom css класс не отображается в поле зрения - PullRequest
Новая
       30

angular custom css класс не отображается в поле зрения

0 голосов
/ 18 марта 2020

Я работаю над angular formio, поскольку я использую пользовательский класс css, имя CustomCSS Я добавил то же самое в css файл следующим образом

Здесь stackblitz

app.component.s css

.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>

Мой Html this.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 имя класса доступно, но оно не добавляется в представление.

1 Ответ

2 голосов
/ 19 марта 2020

Один из возможных способов заставить его работать из вашего компонента - это изменить инкапсуляцию стиля для этого компонента. 

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;
}
...