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

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

查看文档: Sass变量部分中的https://ionicframework.com/docs/api/components/searchbar/Searchbar/，您有$searchbar-ios-输入-搜索图标-颜色，还有更多的变量，您需要在主题/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