How to change css style of a downloaded child component in angular 2?

Question

I am facing an issue in angular 2. I installed a new component (this one : https://github.com/kekeh/mydatepicker ) and I'm trying to change the style of it. To be more precise, I want to change the border-radius of the input element. I don't know how to do this without changing the source code of this component. Is that any possibility access to the style from the parent component ?.

Let me share some piece of code of what I want to do. In my component i have something like this :

<my-date-picker required></my-date-picker>

I want to do something like this in css :

my-date-picker input {
  border-radius : 0px;
}

note that in the component the border radius is set at 4px. Thanks

Answer 1

In your custom css file. Over ride as below

.mydp, .mydp .headertodaybtn, .mydp .selection, .mydp .selectiongroup, .mydp .selector {
 border-radius:15px
}

Answer 2

Usually, I override styles in app.component.css . To do that, add this line in your component decorator in app.component.ts after importing ViewEncapsulation

import {Component, ViewEncapsulation, OnInit} from '@angular/core';

and then

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.css'
  ],
  encapsulation: ViewEncapsulation.None
})

Then add your styles in app.component.css . As app.component is your root component, so any styles applied in this component will also be applied to components loaded in app-root .

Hope this helps.

Reference for encapsulation

Answer 3

Paste this code into your override.css :

.mydp, .mydp .headertodaybtn, .mydp .selection, .mydp .selectiongroup, .mydp 
.selector {
     border-radius:0 !important;
}

Hope this will work.