更改离子段文本颜色

Question

我有以下代码，我想改变分段按钮的文本颜色

<ion-content>
  <ion-toolbar color="header">
    <ion-segment [(ngModel)]="tripType">
      <ion-segment-button value="OW">
        One Way
      </ion-segment-button>
      <ion-segment-button value="RT">
        Round Trip
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-content>

我可以看到$segment-button-ios-text-color作为Saas变量，但我不知道如何使用它。

Answer 1

基本上，我们在css/scss文件中编写样式，并将它们包含在html文件中。

您可以像这样编写<ion-segment-button value="OW" style="color: red;">，但这不是一种好的做法。因为如果我们像我说的那样编写内联样式，我们就不能覆盖(不能改变)它们。

所以，最好有一个css/scss文件，有一个像这样<ion-segment-button>的类，在css/scss文件中编写样式，如下所示，并将其包含在html文件中

.segment-button {
    color: red; // here, instead of "red" you can use sass variable if it was already defined
}

以下代码的工作方式与上面相同

$segment-button-ios-text-color: red
.segment-button {
    color: $segment-button-ios-text-color;
}

Answer 2

您可以在variables.scss中覆盖$segment-button-ios-text-color，它将被设置为IOS应用程序的应用程序中的所有细分按钮。

如果要覆盖Android，请设置$segment-button-md-text-color的值

$segment-button-ios-text-color: red;

这将由Ionic在构建过程中自动设置

如果要覆盖某个特定的html，请在相应的scss文件中对其进行设置。对于具有选择器home的home.html示例，请在home.scss中设置以下内容

home{
 .segment-button {
    color: red; //as suggested by @Mr_Perfect
  }
}

Answer 3

从以下位置删除颜色：

<ion-toolbar color="header"> </ion-toolbar>

它会覆盖$segment-button-ios-text-color变量

<ion-content>
  <ion-toolbar>
    <ion-segment [(ngModel)]="tripType">
      <ion-segment-button value="OW">
        One Way
      </ion-segment-button>
      <ion-segment-button value="RT">
        Round Trip
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-content>

然后，您现在可以在app.scss或variables.scss中设置该值