覆盖 ng-bootstrap datepicker select.style答案

【问题标题】：overwrite ng-bootstrap datepicker select.style覆盖 ng-bootstrap datepicker select.style
【发布时间】：2021-08-04 12:57:16
【问题描述】：

我正在使用 ng-bootstrap 日期选择器，但在选择样式月份和年份时遇到问题

问题在于选择样式。

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

在 Html 中，我有这样的：

我认为解决这个问题的方法是让padding 0.0rem

但我无法覆盖此样式。

【问题讨论】：

标签： css angular ng-bootstrap

【解决方案1】：

您可以通过在您想要覆盖的样式值之后添加 !important 来覆盖每个引导程序样式。
示例引导样式覆盖：

.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; 
}

【讨论】：

自动生成 [_nghost-c21] > select[_ngcontent-c21] 的问题意味着在其他测试中它可以是 [_nghost-c24] > select[_ngcontent-c24] 所以覆盖应该是在其他地方

【解决方案2】：

添加 encapsulation: ViewEncapsulation.None, 在您的组件（您使用日期选择器的地方）元数据中。

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

这不仅适用于 datepicker，它还可以帮助您覆盖来自任何 3rd 方库样式的任何组件，类似于 ng-bootstrap。

【讨论】：