如何在角度2中更改下載的子組件的css風格？

Question

我正面臨一個角度2的問題。我安裝了一個新組件（這一個：https://github.com/kekeh/mydatepicker），我試圖改變它的風格。更確切地說，我想改變輸入元素的邊界半徑。我不知道如何在不更改此組件的源代碼的情況下執行此操作。是否有可能從父組件訪問樣式？

讓我分享一下我想做的一段代碼。在我的部分，我有這樣的事情：

<my-date-picker required></my-date-picker> 

我想要做這樣的事情在CSS：

my-date-picker input { 
    border-radius : 0px; 
} 

注意，在組件的邊框半徑設定爲4像素。謝謝

Answer 1

在您的自定義CSS文件。如下所示

.mydp, .mydp .headertodaybtn, .mydp .selection, .mydp .selectiongroup, .mydp .selector { 
border-radius:15px 
} 

Answer 2

通常，我會覆蓋app.component.css中的樣式。要做到這一點，在你component裝飾在app.component.ts加入這一行導入ViewEncapsulation

import {Component, ViewEncapsulation, OnInit} from '@angular/core';

後再

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ], encapsulation: ViewEncapsulation.None })

然後在app.component.css添加您的風格。 由於app.component是您的根組件，因此在此組件中應用的所有樣式也將應用於在app-root中加載的組件。

希望這會有所幫助。

參考了encapsulation

Answer 3

這段代碼粘貼到您的override.css：

.mydp，.mydp .headertodaybtn，.mydp .selection，.mydp .selectiongroup，.mydp .selector { border-半徑：0！重要; }

希望這會起作用。