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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

ion-input {
  background-color: white;
}

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