Ionic 自定义离子刷新微调器图标的颜色

Question

如何自定义每个页面的 ionic refresher spinner 图标的样式？在我的应用程序的每个页面中，微调器应该具有不同的颜色，具体取决于用户所在的页面。我在我的css中做了类似的事情。但是我只自定义了刷新器的背景颜色为灰色。

这里是 styles.css

ion-refresher * {
    // background-color: white;
    ion-refresher-content * {
      icon * {
        color: #dd2727;
      }
      color: red;
        .refresher-refreshing {
          .refresher-pulling-icon, .refresher-refreshing-icon {
            text-align: center;
            -webkit-transform-origin: center;
            transform-origin: center;
            font-size: 30px;
            color: #dd2727;
            -webkit-transition: 200ms;
            transition: 200ms;
          }
        }
    }
  }

这里是 page.html

<ion-refresher (ionRefresh)="doRefresh($event)">
      <ion-refresher-content
        pullingIcon="arrow-dropdown"
        refreshingSpinner="crescent">
      </ion-refresher-content>
    </ion-refresher>

我尝试用谷歌搜索，但找不到任何解决方案。

如果有人可以提供帮助，我们将不胜感激。 提前致谢。

Answer 1

在 Ionic 4 中，我设法使用

更改了拉动图标（默认为暗箭头）

ion-refresher ion-refresher-content .refresher-pulling .refresher-pulling-icon ion-icon {
  color: #fff !important;
}

Answer 2

您可以在 ionic 文档中查看复习组件 https://ionicframework.com/docs/api/components/refresher/Refresher/

他们在底部指定了 sass 变量以根据我们的需要更改样式：

$refresher-icon-color
$refresher-icon-font-size
$refresher-text-color
$refresher-text-font-size
$refresher-border-color

假设您想在您的应用中使用$refresher-icon-color: red;，您可以在theme/variable.scss 中调用此变量，这将覆盖默认样式。

CSS

圆形svg

.refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
   stroke : red;
}

拉图标css

.refresher-pulling-icon, .refresher-refreshing-icon{
  color: red
}

ionic 中的每个页面都有页面名称格式，因此您可以在单个页面 scss 文件中添加您的工作样式，如果您想更改微调器图标的颜色，那么它是一个 svg，您可以在页面 scss 文件本身中使用上面的 css。

像这样：

page-spinner{
    .refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
       stroke : red;
    }
}