代码之家 › 专栏 › 技术社区 › cnak2

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

scss-mixins ionic3 sass

0

cnak2 · 技术社区 · 6 年前

我有一个爱奥尼亚3应用程序,我在那里有一个搜索字段。我正在尝试用深色背景和白色文本给它上色。

我有以下代码,可以在后台正常工作,但默认图标和占位符文本不会变为白色:

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

以下是组件:

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

我错过了什么?

2 回复 | 直到 6 年前

1

Ashwani 6 年前

查看文档: https://ionicframework.com/docs/api/components/searchbar/Searchbar/ 在Sass变量部分这里有$searchbar ios输入搜索图标颜色和更多需要在主题/变量中声明的变量。scss公司只需添加它们,就可以了。

快乐的编码:)

2

0

ashfaq.p 6 年前

使用的默认搜索图标是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