角度2でダウンロードした子コンポーネントのCSSスタイルを変更するにはどうすればよいですか？

Question

私はアンギュラ2の問題に直面しています。私は新しいコンポーネント（これはhttps://github.com/kekeh/mydatepicker）をインストールしましたが、そのスタイルを変更しようとしています。具体的には、入力要素のボーダー半径を変更したいと思います。私は、このコンポーネントのソースコードを変更せずにこれを行う方法を知らない。それは親コンポーネントからのスタイルへのアクセスの可能性ですか？

私がしたいコードの一部を共有しましょう。コンポーネントでボーダー半径が4PXに設定されていることを

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

ノート：私はCSSでこのような何かをしたい

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

：私のコンポーネントでは、私はこのような何かを持っています。ありがとう

Answer 1

あなたのカスタムCSSファイルにあります。次のような乗り越え。

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

Answer 2

通常、スタイルはapp.component.cssに上書きされます。これを行うには、ViewEncapsulation

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

をインポートした後app.component.tsであなたのcomponentデコレータにこの行を追加し

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

はその後app.component.cssであなたのスタイルを追加します。 app.componentはルートコンポーネントなので、このコンポーネントに適用されているスタイルは、app-rootにロードされたコンポーネントにも適用されます。

これが役に立ちます。

.mydp、.mydp .headertodaybtn、.mydp .selection、.mydp .selectiongroup、.mydp .selector { BORDER-：encapsulation

Answer 3

あなたoverride.cssにこのコードを貼り付け用

リファレンス半径：0！重要; }

これはうまくいきます。