スタイリングDevExtremeのテキストボックス

Question

私のプロジェクトでは、角度のあるdevextremeを使用していて、入力（テキストボックス）のスタイリングがいくつかあります。私はCSSでそれをターゲットとするすべての可能な方法を試して、ちょうどそれを行うことはありません..これらの2つのCSSで私は何を試したの断片です。誰かが私を助けることができれば、私はそれを高く評価します。

<dx-validation-group> 
    <dx-text-box id="code" placeholder="ENTER YOUR CODE" [(value)]="code" width="300"> 
     <dx-validator [validationRules]="[{ 
       type: 'required', 
       message: 'Code is required' 
      }]"></dx-validator> 
    </dx-text-box> 
    <dx-button id="submit-button" text="LOGIN" (onClick)="validate($event)" [useSubmitBehavior]="true"></dx-button> 
</dx-validation-group> 

とCSS：

#code { 
    margin: 20px auto; 
    color: white; 
    border: 0; 
    outline: 0; 
    background: transparent; 
    border-bottom: 1px solid white; 
    text-align: center; 
    font-size: 18px !important; 
    letter-spacing: 2px; 
    margin-bottom: 20px; 
} 

#code .dx-texteditor-input { 
    margin: 20px auto; 
    color: white; 
    border: 0; 
    outline: 0; 
    background: transparent; 
    border-bottom: 1px solid white; 
    text-align: center; 
    font-size: 18px !important; 
    letter-spacing: 2px; 
    margin-bottom: 20px; 
} 

Answer 1

あなたは/deep/または::ng-deepのような影ピアス子孫コンビネータを使用する必要があります（角度^ 4.3.0（2017年7月14日））に はここに私のHTMLです子コンポーネントツリーを介してすべての子コンポーネントビューにスタイルを強制的に適用します。

#code /deep/ .dx-texteditor-input { 
    ... 
} 

Plunker Example

を参照してください使用している角度のバージョンも

• https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep