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>

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

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;
  }
}