Angularjs 更改离子段文本颜色

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

<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文本颜色视为Saas变量，但我不知道如何使用它。

基本上，我们在

css/scss

文件中编写样式，并将它们包含在html文件中

您可以这样编写

，但这不是一个好的做法。因为如果我们像我说的那样写内联样式，我们就不能覆盖（不能更改）它们

所以，最好有一个

css/scss

文件，有一个类来

像这样

在

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;
}

---

您可以在变量.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
  }
}

从以下位置删除颜色：

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

它覆盖$segment button ios文本颜色变量

<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中设置值。可以通过以下方式进行设置：

• 首先，在scss文件中写入您的颜色：

   .segment { color: red;}
  

• 然后，在html文件中执行以下操作：

  <ion-segment value="Providers">
    <ion-segment-button value="Providers" class="segment">
      <ion-label>Providers</ion-label>
    </ion-segment-button>
    <ion-segment-button value="Services" class="segment">
      <ion-label>Services</ion-label>
    </ion-segment-button>
  </ion-segment>
  

  
  提供者
  服务
  

---

您想单向更改

此文本颜色？我想更改两个按钮的颜色显示您更改文本颜色的样式？我没有使用任何样式，默认情况下，它有一个公共类来
ion segment button
标记并更改颜色我们可以对scss执行相同的操作吗？您是指scss变量吗？您是如何获得它的？默认颜色？我创建了侧菜单项目。然后在src/pages中创建了一个文件夹，其中包含xxx.html、xxx.scss和xxx.ts中的三个文件。我已经将我的问题代码放在.html文件中，并将您的代码放在.scss文件中。您在哪里设置了scss变量？让我们看看。