如何在 ionic 4 中的组件之间使用全局或共享样式？

Question

在ionic 3中我们使用app.scss文件来编写全局样式。 Ionic 4 未提供 scss 变量来覆盖 ion-inputs 背景以及许多其他 css 属性。

我需要对所有 ion-inputs 应用白色背景。现在，我能够通过在每个组件上复制以下 scss 代码来做到这一点：

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

但是我只想把这段代码写在一个地方。 scss 文件是做什么用的？我必须在某个地方导入该文件吗？

Answer 1

你只需要像这样把你的 css 放在 variable.scss 中

ion-input {
  background-color: white;
}

那么每当你使用 ion-input 时，它的背景颜色为 白色。

Answer 2

您可以在styles.scss中添加自定义样式，但提醒如果是中间样式表，您必须添加!important以确保：

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

注意： 使用 var(--ion-color-light) 应用来自 variables.scss 的离子原生光（白色）颜色。