Как использовать глобальные или общие стили между компонентами в ionic 4?

В ionic 3 мы используем файл app.scss для записи глобальных стилей. Ionic 4 не предоставляет переменную scss для переопределения фона ion-inputs, а также многих других свойств css.

Мне нужно применить белый фон ко всем ion-inputs. На данный момент я смог сделать это, воспроизведя следующий код scss для каждого компонента:

:host { 
  ion-input {
    --background: white;
  }
}

Но я хотел бы написать этот код только в одном месте. Что такое файл scss для этого? Должен ли я импортировать этот файл в какое-то место?


ionic-framework ionic4 sass
person Gabriel Bianconi    schedule 31.01.2019    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вам просто нужно поместить свой css в variable.scss вот так

ion-input {
  background-color: white;
}

затем всякий раз, когда вы используете ion-input, он принимает цвет фона белый.

person Aniruddh Thakor    schedule 01.02.2019

arrow_upward
1
arrow_downward

Вы можете добавить пользовательские стили в styles.scss, но помните, что если они являются промежуточными таблицами стилей, вы должны добавить !important, чтобы обеспечить:

ion-input {
   --background: var(--ion-color-light) !important;
}

Примечание. Используйте var(--ion-color-light), чтобы применить собственный светлый (белый) цвет Ionic из variables.scss.

person Aingeru72    schedule 24.06.2019
comment
Слишком частое использование !important не очень приветствуется. - person egor518; 24.06.2019
comment
@АлиД. Я знаю, но я думаю, что его использование допустимо, когда вы используете глобальный файл стилей, чтобы избежать объявлений промежуточного стиля или inherit во всех дочерних классах. - person Aingeru72; 24.06.2019
comment
Может быть. Но есть принятый ответ выше, который может быть более приемлемым. - person egor518; 24.06.2019