Ioni c 5 - Как применить индивидуальный стиль к ионному вводу - PullRequest
Новая
       5

Ioni c 5 - Как применить индивидуальный стиль к ионному вводу

1 голос
/ 07 мая 2020

Как лучше всего применить настраиваемую таблицу стилей к ионному вводу? Я попытался добавить собственный класс, но он не обновляет все свойства CSS.

Вот мой код 

  <h1>Log In</h1>
  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input class="form-input" name="email" type="email" placeholder="your@email.com" ngModel required></ion-input>
  </ion-item>
  <ion-item>
      <ion-label position="floating">Password</ion-label>
    <ion-input name="password" type="password" placeholder="Password" ngModel required></ion-input>
  </ion-item>
  <ion-button class="form-input" shape="round" type="submit" [disabled]="form.invalid" expand="block" class="ion-text-capitalize    ">Log In</ion-button>
</div>

.form-input {
    border: 1px solid $input-border-color;
    padding: $input-padding-25;
    color: $input-color;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: $input-font-size;
    font-weight: 500;
    font-family: $font-family-base;
    height: auto;
    -webkit-border-radius: $input-border-radius;
    border-radius: $input-border-radius;
    background: $input-bg;
    line-height: 24px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

1 Ответ

0 голосов
/ 07 мая 2020

Ioni c 5 использует переменные CSS4, переменные CSS4 могут быть изменены во время выполнения. Поскольку ioni c 5 использует shadow DOM, который является стандартом веб-компонентов, и вы не можете стилизовать элементы, которые находятся внутри DOM (который создается во время выполнения), и единственный способ изменить DOM для стилизации с помощью переменной CSS4 .

Заменить это заполнение - 

padding: $input-padding-25;

Использовать это - 

--padding-start: 20px;
--padding-top: 20px;
--padding-bottom: 10px;
--padding-end: 10;
...