Question

对于我的项目我正在使用具有角度的devextreme，并且我在设置它的输入（文本框）时遇到一些困难。我尝试了用css瞄准它的所有可能的方法，并且不会这样做。这两个在css中只是我尝试过的片段。如果有人可以帮助我，我会非常感激。这是我的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>

和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（angular ^ 4.3.0（2017-07-14））这样的阴影穿透后代组合器来强制将一个样式向下穿过子组件树到所有子组件视图。

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

Plunker Example

另见

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

样式DevExtreme文本框

1 个答案: