Styling DevExtreme text box

Question

내 프로젝트에서 나는 각진과 함께 devextreme을 사용하고 있으며 입력 (텍스트 상자)을 지정하는 데 약간의 어려움이있다. 나는 CSS에서 그것을 목표로 삼을 모든 가능한 방법을 시도하고 그냥하지 않을 ..이 두 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