Изменить цвет фона ионного элемента в Ionic 4.0

Question

Добрый день всем

Надеюсь, никто еще не спрашивал об этом ... Я нашел несколько похожих постов, таких как , этот , но он не работает для Ionic 4.0. То, что они предлагают здесь, похоже, не работает для меня, так как Ionic 4.0, кажется, не вводит то же самое

<div class='item-content'></div>

элемент обсуждается в связанном посте.

Я пытаюсь изменить цвет фона элемента ионного элемента Ionic 4.0. Я пытаюсь дать ему белый фон, в то время как приложение имеет синий фон.

Я вижу в инспекторе кода, что он применяет мой стиль, но он не отображается в браузере.

Вот пример моего кода:

<ion-item class="light-back">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>


.light-back{
    background-color: #fff;
}

Ниже приведен скриншот того, на что я смотрю, который показывает, что элемент (панель поиска) получает стиль, но не реализует или не показывает его.

Любой совет будет принят с благодарностью.

Answer 1

Это работает для ионных 4

1 - Открыть файл: src / theme / variables.scss 2 - введите код цвета:

  /** transparent **/
  --ion-color-transparent: #fafafa;
  --ion-color-transparent-rgb: 245, 61, 61;;
  --ion-color-transparent-contrast: #ffffff;
  --ion-color-transparent-contrast-rgb: 255, 255, 255;
  --ion-color-transparent-shade: #dcdcdc;
  --ion-color-transparent-tint: #fbfbfb;

obs: #fafafa соответствует прозрачному цвету

2 - открыть файл global.scss и вставить код:

.ion-color-transparent {
    --ion-color-base: var(--ion-color-transparent) !important;
    --ion-color-base-rgb: var(--ion-color-transparent-rgb) !important;
    --ion-color-contrast: var(--ion-color-transparent-contrast) !important;
    --ion-color-contrast-rgb: var(--ion-color-transparent-contrast-rgb) !important;
    --ion-color-shade: var(--ion-color-transparent-shade) !important;
    --ion-color-tint: var(--ion-color-transparent-tint) !important;
}

3 - вызвать прозрачный цвет в ионном элементе

<ion-item color="transparent">

</ion-item>

Answer 2

Ни один из ответов не работал для меня полностью, хотя @ labago answer работает частично.

--ion-background-color работает только для статического содержимого без каких-либо отступов или полей. Как только я начинаю применять отступы, он не дает ожидаемых результатов, поэтому ниже представлен обходной путь, который я использовал в своем приложении:

ion-item {
  padding:20px;
  --ion-background-color: blue;
  background: blue; 
}

Answer 3

Используйте это специальное ионное правило CSS:

ion-item{
   --ion-background-color:#fff;
}

Answer 4

Я нашел рабочий в ionic 4. Примените ниже 2 CSS в вашем файле .scss, где вы реализовали ion-list и ion-item:

 ion-item {
--ion-background-color: white !important;

}

 .item, .list, .item-content, .item-complex {
--ion-background-color: transparent !important;

}

Answer 5

Кажется, я нашел исправление. Вам просто нужно добавить color = "light" к элементу ion-item. Пожалуйста, смотрите ниже:

<ion-item class="light-back" color="light">
  <ion-icon name="search" color="light"></ion-icon>
    <ion-input required type="text" placeholder="Search for a site" color="light">
  </ion-input>
</ion-item>

Проблема в том, что другой код вставляется на основе моей темы, которую я установил в качестве основного цвета из моих переменных, поэтому мне нужно указать, что я снова использую светлую тему (которую я уже настроил как #fff в моих переменных).

Надеюсь, это поможет кому-то в будущем:)