Styling DevExtreme Textfeld

Question

Für mein Projekt benutze ich Devextreme mit eckigen und ich habe einige Schwierigkeiten Styling seiner Eingabe (Text-Box). Ich habe versucht jede Möglichkeit, es in CSS zielen und einfach nicht tun .. Diese beiden in CSS sind nur Fragment von dem, was ich versucht habe. Wenn jemand mir helfen kann, würde ich es sehr schätzen. Hier ist mein HTML:

<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> 

und 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

Sie sollten Schatten-Piercing Nachkomme combinator wie /deep/ oder ::ng-deep (Winkel^4.3.0 (2017.07.14)) verwenden, um Erzwingen Sie einen Stil durch den untergeordneten Komponentenbaum in alle untergeordneten Komponentenansichten.

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

Plunker Example

Siehe

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