Календарь PrimeNG - переопределить стиль по умолчанию - PullRequest
Новая
       21

Календарь PrimeNG - переопределить стиль по умолчанию

0 голосов
/ 09 октября 2018

Используя angular, я использую p-календарь в компоненте и создал класс CSS, который вызывается из моего компонента.Независимо от того, что я делаю, я не могу переопределить стиль.

CSS 

.ui-calendar .ui-calendar-button {
    height: 34px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 900em;
    border-left: 0 none;
}

HTML 

<div class="form-group col-xs-3 col-md-3"
                                     [ngClass]="{
                                     'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
                                     !ersaForm.get('effectiveDt').valid
                                     }">
                                    <label for="effectiveDtId" class="control-label">Effective Date</label><br />

                                    <p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
                                                 inputStyleClass="form-control " 
                                                 class="ui-calendar ui-calendar-button"
                                                 [style]="{'width': '100%','display': 'inline-flex','height':'34px'}"  ></p-calendar>

                                </div>

**************************************************** ОБНОВЛЕНИЕ ****************************************

Я изменил свой файл SCSS на 

::ng-deep .only-style-this .ui-calendar .ui-calendar-button { 
height: 34px !important; 
border-top-left-radius: 0 !important;
}

HTML 

  <div class="form-group col-xs-3 col-md-3 only-style-this"
                                 [ngClass]="{
                                 'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
                                 !ersaForm.get('effectiveDt').valid
                                 }">
                                <label for="effectiveDtId" class="control-label">Effective Date</label><br />

                                <p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
                                             inputStyleClass="form-control" 

                                             styleCalss=".ui-calendar .ui-calendar-button"
                                             [style]="{'width': '100%','display': 'inline-flex','height':'34px'}"  ></p-calendar>

                            </div>

предупреждение

Проверка (CSS 3.0):«:: ng-deep» не является допустимым псевдоэлементом.

1 Ответ

0 голосов
/ 09 октября 2018

Вы не можете настроить css дочернего компонента, это нарушает инкапсуляцию.Это будет работать, но устарело : 

::ng-deep .ui-calendar .ui-calendar-button {
    height: 34px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 900em;
    border-left: 0 none;
}

Это практически то же самое, что добавить его в глобальную таблицу стилей.Тем не менее, глобальные стили будут применяться только тогда, когда компонент загружен в первый раз, что делает его бесполезным.В целях безопасности вы можете обернуть свой компонент в класс «only-style-this» и выполнить: 

::ng-deep .only-style-this .ui-calendar .ui-calendar-button {
  ...
}

В качестве альтернативы, prime-ng обычно позволяет передавать стили большинству его компонентов.

Если вы посмотрите на документы , вы обнаружите, что есть свойство стиля, которое вы можете использовать.Есть также другие свойства, с которыми вы можете поиграть, например, inputStyle.

...