Question

我有一个简单的页面（屏幕）：

<ion-header>
  <ion-toolbar color="primary">
    <ion-searchbar
      placeholder="Search"
      (ionInput)="filterItems($event)"
      [showCancelButton]="true"
      cancelButtonText="Cancel"></ion-searchbar>
  </ion-toolbar>
</ion-header>

参考official documentation：

您可以使用Ionic覆盖许多变量。可以从src / theme / variables.scss文件中覆盖以下任何变量，只需在文件中添加一个新值即可。

我想更改搜索栏组件中输入的背景。我发现我应该覆盖此变量：

/// @prop - Background of the searchbar input inside of a toolbar
$searchbar-ios-toolbar-input-background:  rgba(0, 0, 0, .08) !default;

在MyProject/node_modules/ionic-angular/components/searchbar/searchbar.ios.scss:58

中声明

因此，根据文档，在我的MyProject/src/theme/variables.scss中的注释下，建议添加我要添加的iOS特定应用程序级样式：

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

$searchbar-ios-toolbar-input-background: #fff;

但是输入的背景与原始组件的样式中定义的背景相同。如果我在以上语句的颜色后面添加!important，一切正常。

如果我尝试覆盖相同的内容，但对于Android设备（材料设计变量），则无需添加!important。

我在做什么错了？

编辑：实际上，没有!important，该组件的任何变量都不是“ overwritebale”。

ionic-覆盖组件的SASS变量不适用于iOS

0 个答案: