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

Question

在ionic 3中，我们使用app.scss文件编写全局样式。 Ionic 4没有提供css4变量来覆盖离子输入背景以及许多其他css属性。

我需要将白色背景应用于所有离子输入。现在，我能够通过在每个组件上复制以下scss代码来做到这一点：

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

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

Answer 1

您只需要像这样将CSS放入 variable.scss

ion-input {
        background-color: white;
}

然后，无论何时使用离子输入，背景颜色都会变成白色。

Answer 2

您可以在 styles.scss 中添加自定义样式，但是请注意，如果它们是中间样式表，则必须添加!important以确保：

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

注意：：使用var(--ion-color-light)可以应用 variables.scss 中的离子本征光（白色）。