覆蓋 ng-bootstrap 日期選擇器 select.style

Question

我正在使用 ng-bootstrap datepicker 並且在 select 風格的月份和年份中遇到問題

問題出在 select 樣式中。

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

在 Html 中，我有這樣的：

我認為解決這個問題的方法是讓padding 0.0rem

但我不能覆蓋這種風格。

Answer 1

您可以通過在您想要覆蓋的樣式值之后添加 .important 來覆蓋每個引導程序樣式。
示例引導 styles 覆蓋：

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

在你的情況下嘗試：

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

Answer 2

添加encapsulation: ViewEncapsulation.None,在您的組件（您使用日期選擇器的地方）元數據中。

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

這不僅適用於 datepicker，它還可以幫助您覆蓋來自任何 3rd 方庫 styles 的任何組件，類似於 ng-bootstrap。