Angular 2＆4-ng-pick-datetime覆蓋組件樣式表

Question

我正在使用Angular CLI（ng4），並且正在實施ng-pick-datetime（https://www.npmjs.com/package/ng-pick-datetime）。

一切都按預期加載，它是一個相當不錯的模塊。

但是，我的關聯組件樣式表似乎在模塊加載它自己的樣式表之前就被加載了。因此覆蓋我在組件的樣式表中聲明的任何樣式。

component.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" 
    ], 

選擇，日期和time.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中