Is it possible to change styles of 3rd party module?

Question

I am quite new in Angular and I have a headache with a datepicker. In my Angular5 application I used a datepicker placed here:

https://github.com/kekeh/mydatepicker

To use this datepicker, I added:

<my-date-picker name="mydate" [options]="myDatePickerOptions"
                    [(ngModel)]="model" required></my-date-picker>

and works perfectly.

However I need to change some css styles of this element. This is simply input. Is there any chance to add some extra styles when view is fully loaded? Like in jQuery via document ready()?

Answer 1

Combing info on https://github.com/kekeh/mydatepicker#change-styles-of-the-component and ::ng-deep:

::ng-deep my-date-picker .weekdaytitle{
  color: red !important;
  width:100px;
}

DEMO

Answer 2

You can either add styles to your global style sheet, or in the CSS for the component which includes that datepicker. If in the component's CSS file, you'll probably have to use ::ng-deep combinator if using the default encapsulated emulation

::ng-deep my-date-picker input
{
    margin: 10px;
}

In either case, you still have to make sure that your CSS rulkes have precedence over the default ones