overwrite ng-bootstrap datepicker select.style

Question

I'm using ng-bootstrap datepicker and having issue in select style month and year

the problem is in select style.

select[_ngcontent-c21] {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0 .5rem;    // the problem in this line

In Html, I have like this:

I think to solve this problem is to make padding 0.0rem

but I can not overwrite this style.

Answer 1

You can overwrite every bootstrap style just by adding.important after value of style that u want to overwrite.
Example bootstrap styles overwriting:

.signup-form .btn:hover, .signup-form .btn:focus {
    background: #179b81 !important;
}

In your case try:

select[_ngcontent-c21] {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0 rem !important; 
}

Answer 2

add encapsulation: ViewEncapsulation.None, in your component(where you are using the datepicker) metadata.

@Component({
  selector: 'wrapper-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
  encapsulation: ViewEncapsulation.None,
})

this is not just for datepicker, this helps you to overwrite any component from any 3rd party lib styles similar to ng-bootstrap.