Стилизация текстового поля DevExtreme

Для моего проекта я использую devextreme с angular, и у меня есть некоторые трудности со стилем ввода (текстовое поле). Я пробовал все возможные способы нацеливания на это в 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;
}

person Jacky    schedule 30.09.2017    source источник
comment
Какую угловую версию вы используете?   -  person yurzui    schedule 30.09.2017


Ответы (1)


Вы должны использовать комбинатор потомков, проникающий в тень, например /deep/ или ::ng-deep (angular ^4.3.0 (2017-07-14)), чтобы заставить стиль пройти через дерево дочерних компонентов во все представления дочерних компонентов.

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

Пример планкера

Смотрите также

person yurzui    schedule 30.09.2017