Как переопределить стили input CSS для ng2-date-picker

Question

Я пытаюсь стилизовать компонент Angular2 ng2-date-picker ( link ) и буду признателен за любые рекомендации.

Я не могу найти никаких документов, касающихся стиля этого компонента в Интернете, и есть только один похожий вопрос по stackoverflow , который мне не очень помогает.

I would like to style the actual `<input >` element inline with the below CSS:

.af-input {
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    border-radius: 15px;
    border: solid 1px $af-brownish-grey;
    background-color: transparent;
    color: $af-brownish-grey;
  }

Это моя настройка в моем HTML / View:

<div class="date-picker">
    <dp-date-picker theme="dp-material" [(ngModel)]="selectedDate" mode='daytime' [config]='config'></dp-date-picker>
</div>

Это атрибуты CSS, которые я вижу при проверке элемента в браузере:

dp-date-picker.dp-material .dp-picker-input {
    box-sizing: border-box;
    height: 30px;
    width: 213px;
    font-size: 13px;
    outline: 0;
}

button, input {
    overflow: visible;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

Это код HTML при проверке элемента ng-date-picker:

<div _ngcontent-oyd-c55="" class="date-picker">
    <dp-date-picker _ngcontent-oyd-c55="" theme="dp-material" mode="daytime" ng-reflect-theme="dp-material"
        ng-reflect-mode="daytime" ng-reflect-config="[object Object]" class="dp-material ng-valid ng-dirty ng-touched"
        ng-reflect-model="Fri Jun 19 2020 13:50:18 GMT+0">
        <div ng-reflect-ng-class="[object Object]" class="dp-open">
            <div class="dp-input-container"><input type="text" class="dp-picker-input ng-pristine ng-valid ng-touched"
                    ng-reflect-is-disabled="false" ng-reflect-model="2020-06-19" placeholder=""></div>
        </div>
    </dp-date-picker>
</div>

Заранее спасибо!

Answer 1

Не похоже, что этот компонент допускает стилистические конфигурации. Вам нужно будет вручную переопределить существующий стиль с помощью css. Просто проверьте элемент и найдите нужные селекторы, которые вы хотите переопределить. Поскольку это внешний компонент, убедитесь, что ваши стили заключены в ::ng-deep { ... }, чтобы ваши стили были помещены в верхнюю часть дерева DOM и могли переопределить первоначальный стиль.

Answer 2

В соответствии с ответом Берка Куркчуоглу, я решил свою задачу стилизации, используя :: ng-deep {...}.

Это моя конкретная реализация c для стилизации <input >:

.date-picker {
    ::ng-deep {
        input {
            &:last-child {
                font-family: $af-default-font;
                font-size: 20px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                letter-spacing: normal;
                border-radius: 15px;
                border: solid 1px $af-brownish-grey;
                background-color: transparent;
                color: $af-brownish-grey;
            }
        }
    }
}

* См. Также этот ответ для более подробной информации.

Надеюсь, это поможет кому-то другому!