css - Angular 2 & 4 - ng-pick-datetime 覆盖组件样式表

Question

我正在使用 Angular CLI (ng4)，并且正在实现 ng-pick-datetime ( https://www.npmjs.com/package/ng-pick-datetime )。

一切都按预期加载，这是一个非常好的模块。

但是，我的关联组件样式表似乎在模块加载它自己的样式表之前就已加载。因此覆盖我在组件样式表中声明的任何样式。

组件.css

.owl-dateTime-dialog {
    background-color: #fff !important;
    border: 1px solid #000 !important;
}

See example here...

不太确定从这里去哪里。肯定是我错误地实现了模块，至于为什么它的样式表在组件的之后加载？？？

.angular-cli.json

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/ng-pick-datetime/assets/style/picker.min.css",
    "styles.css"
  ],

选择日期和时间.component.ts

import { Router } from '@angular/router';
import { DateTimePickerModule } from 'ng-pick-datetime';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-select-date-and-time',
  templateUrl: './select-date-and-time.component.html',
  styleUrls: ['./select-date-and-time.component.css']
})
export class SelectDateAndTimeComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

}

如有任何帮助，我们将不胜感激!

Answer 1

将您的 css 类放在全局 styles.css