sass - 无法自定义默认搜索组件的颜色

Question

我有一个 Ionic 3 应用程序，我正在处理我有一个搜索字段的地方。我正在尝试用深色背景和白色文本为其着色。

我有以下代码，在背景上运行良好，但默认图标和占位符文本没有变白：

  .searchbar {
    background-color:#2f303e; 
    color:#fff;
      .searchbar-input {
        background-color:#2f303e; 
        color:#fff;
      }
  }

这是组件：

  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

我错过了什么？

Answer 1

查看文档： https://ionicframework.com/docs/api/components/searchbar/Searchbar/ 在 Sass 变量部分中，您有 $searchbar-ios-input-search-icon-color 和更多需要声明的变量它们在 theme/variables.scss 中只需添加它们就可以了。

快乐编码..:)

Answer 2

使用的默认搜索图标是 svg（用作背景图像）。它的颜色不能通过使用来改变color: #fff;

而是使用可用于图标颜色的 sass 变量：

ios: $searchbar-ios-input-search-icon-svg

android: $searchbar-md-input-search-icon-color

对于占位符颜色：

ios: $searchbar-md-input-placeholder-color

android: $searchbar-ios-input-placeholder-color