sass - 如何更改 Ionic 4 中后退按钮图标的颜色？

Question

我正在尝试将 Ionic 4 应用程序工具栏中的后退按钮图标设为白色。我已经添加了：

ion-back-button {
  --color: white;
}

在我的global.scss，但图标仍然是灰色的。我设法使我的工具栏标题变白。

这是我的模板：

<ion-toolbar>
    <ion-buttons slot="start">
        <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Title</ion-title>
</ion-toolbar>

我希望能够简单地定义一个全局样式来全局更改所有后退按钮的颜色，而不必为每个带有后退按钮的页面添加额外的标记。

标签： sassionic4

Answer 1

在 global.scss 中尝试一下重要

ion-back-button{
  --color: white !important;
}

根据文档将其放置在 :root 中也可以：

https://ionicframework.com/docs/theming/css-variables#setting-values

:root {
  ion-back-button {
    --color: red;
  }
}