覆盖 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。