How override input CSS styles for ng2-date-picker - css

Question

I am trying to style the Angular2 ng2-date-picker (link) component and would appreciate any guidance.
I cannot find any documents regarding the styling of this component online, and there is only one similar question on stackoverflow, which does not help me much.
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;
}
This is my setup in my HTML/View:
<div class="date-picker">
<dp-date-picker theme="dp-material" [(ngModel)]="selectedDate" mode='daytime' [config]='config'></dp-date-picker>
</div>
These are the CSS attributes I see when inspecting the element in the browser:
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;
}
This is the HTML code when inspecting the ng-date-picker element:
<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>
Thank you in advance!

Answer 1

It doesn't seem like this component allows configurations styling-wise.
You'll need to manually override existing styling with css. Just inspect the element and find the required selectors you want to override.
As this is an external component, make sure to wrap your styles with ::ng-deep { ... }, so that your styles get placed at the top of the DOM tree and can override initial styling.

Answer 2

As per Berk Kurkcuoglu's answer, I solved my styling challenge using ::ng-deep { ... }.
This is my specific implementation to style the <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;
}
}
}
}
*See also this answer for more details.
I hope this helps someone else!