Блог

У меня есть список ионов, который содержится в содержимом ионов следующим образом:

 <IonContent class="sub-list-container" scrollY={true} style={{ "background": "red" }}>
    <IonList class="sub-list">
        <IonMenuToggle autoHide={false} key={p.title}>
            {
                p.children.map(el => el)
            }
        </IonMenuToggle>
    </IonList>
</IonContent>
  

Стили для этого:

 
.sub-list-container {
    --background: var(--primary-dark);
}
  

Внутри списка, конечно, есть некоторые элементы ion. Я настроил их разделительную строку так, чтобы она была градиентом от белого до прозрачного, например:

 border-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 0) 100%) 1 1;
  

Это делается для того, чтобы строка сливалась с любым цветом фона, на который я ее наложил. Это отлично работает для списка на другой странице, однако в списке, который я показал выше, он меняется с белого на черный. Проблема не в градиенте, а в цвете фона за ним. Я попытался настроить каждый список, каждое содержимое ion в меню на цвет, который мне нужен для фона, но он по-прежнему выглядит так:

Как вы можете видеть, несмотря на то, что фон серый (и даже фон содержимого ion тоже серый), строка все равно становится черной.
Немного покопавшись в Chrome, я обнаружил, что это:

 .list-ios {
    background: var(--ion-item-background, var(--ion-background-color, #fff));
}
  

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

К сожалению, я не нашел способа отключить этот стиль. Список mode ion может быть только ios или md поэтому он всегда должен иметь один из этих стилей. Даже установка цветов фона !important не работает. Могу ли я в любом случае переопределить этот list-ios стиль?