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

【问题标题】：How do you change the colour of the back button icon in Ionic 4?如何更改 Ionic 4 中后退按钮图标的颜色？
【发布时间】：2019-03-12 06:30:50
【问题描述】：

我正在尝试将 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>

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

【问题讨论】：

标签： sass ionic4

【解决方案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;
  }
}

【讨论】：

【解决方案2】：

在global.scss中添加如下样式

ion-icon.sc-ion-back-button-md , ion-icon.sc-ion-back-button-ios
{
  color: #fff !important;
}

【讨论】：

【解决方案3】：

我刚才遇到了这个问题，--color 变量似乎不起作用，但是将 color 设置为 !important 标志可以。

这就是我所做的，注意 focused 和 hover 变量在您需要更改时似乎确实有效。

  ion-back-button {
    color: #fff !important;
    --color-focused: #fff;
    --color-hover: #fff;
  }

【讨论】：

【解决方案4】：

我遇到了同样的问题。无论我尝试什么，我都无法将离子后退按钮的颜色从灰色更改。因此，我使用 Chrome 开发人员工具检查元素并了解到我加载的第三方模块的主题正在将灰色应用于所有 span 标签。幸运的是，我不再需要那个模块，所以我的答案是简单地删除对主题的引用。

导致此问题的模块是 AWS Amplify。

我在这里发布这个“答案”是为了帮助您或其他任何人采取“下一步”来解决这个“令人抓狂”的问题：使用 Chrome 开发人员工具检查 DOM 中的后退按钮元素，以识别 CSS 规则正在申请中。

【讨论】：

【解决方案5】：

检查您的variables.css 文件，其中应该有与深色主题颜色相关的@media (prefers-color-scheme: dark) 部分。您还需要将颜色灯设置为离子返回按钮。

【讨论】：