Ionic 4 изменяет правило заполнения css для элемента-собственного класса

#css #ionic-framework #sass #ionic4

#css #ionic-framework #sass #ionic4

Вопрос:

Мне нужно изменить заполнение элемента класса item-native, который находится внутри #shadow-root, но я не могу этого сделать.

введите описание изображения здесь

Я перепробовал много видов правил, но ни одно из них не работает:

 --padding-inline-start: 0px !important;
padding-inline-start: 0px !important;
padding-left:0px !important;
  

В этих селекторах:

 .item-native {...}

ion-item .item-native {...}

ion-item {
  .item-native {...}
}
  

Я проверил, что правилом, которое задает заполнение, является padding-inline-start.

введите описание изображения здесь

Я читал, что единственный способ изменить css в элементах shadow-root — это сделать это через css4, но в моем случае, я полагаю, я делаю что-то неправильно, потому что это не работает.

Моя цель — сделать это только в файле scss, потому что я не хочу изменять правило заполнения в проекте hole.

Есть идеи?

Заранее спасибо.

Ответ №1:

Вы можете удалить заполнение, просто добавив класс «ion-no-padding» к элементу ion-item в HTML:

 <ion-item class="ion-no-padding">
  

Ответ №2:

После многих попыток решение заключалось в изменении следующих правил:

 --padding-start:0px;
--ion-safe-area-left: 0px;