角度插件 (ng-daterangepicker) 的样式无法更改

Question

我安装了名为“ng-daterangepicker”的 angular2 插件，然后我想在其中调整 div 的大小，我更改了 .sass 文件，但我的浏览器上没有任何变化（我清除了缓存但仍然无法正常工作），我想我应该修改 .scss 文件，但我在插件上没有找到，我只找到了普通的 sass 文件。

.calendar-container
      display: inline-block
      width: 330px
      height: 100%
      padding: 20px
      border-right: 1px solid $border-light
      float: left

我将宽度从 340 像素更改为 330 像素，但在浏览器上我仍然找到 340 像素。 这是奇怪的部分：我删除了 .sass 文件，但一切仍在工作，所以我认为该组件可能从其他地方获取其样式。

Answer 1

通常，更改插件的源代码是个坏主意。如果您更新组件或重新安装项目，您添加到该特定插件的每个自​​定义更改都将被丢弃。

您可以做的是将 CSS 类添加到指令中，如下所示：

<!-- app.component.html -->
<ng-daterangepicker class="myCustomDateRange" [(ngModel)]="value" [options]="options"></ng-daterangepicker>

然后指向您需要的元素，并在您的一个 SCSS 文件中为其添加自定义 CSS。

<!-- someStylesFile.scss -->
.myCustomDateRange .ng-daterangepicker .calendar .calendar-container { width: 330px; }