更改离子段文字颜色

我有下面的代码，我想改变段按钮更改离子段文字颜色

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

我可以看到$段按钮IOS文本颜色为萨斯可变的，但我不的文本颜色不知道如何使用它。

来源

2017-06-12 Milind

你想改变'一个Way'这个文本颜色？ –

我想改变两个按钮的颜色 – Milind

让我看看您为改变文本颜色所做的样式吗？ –

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

你可以这样写<ion-segment-button value="OW" style="color: red;">但这不是一个好习惯。因为如我们所说，如果我们写内联样式，我们不能覆盖它们（不能被改变）。

因此，最好有一个css/scss文件，并有一个类来<ion-segment-button>这样<ion-segment-button class="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; 
}

来源

2017-06-12 09:44:06

我们可以做同样的与SCSS – Milind

检查更新的答案 –

可以在variables.scss覆盖$segment-button-ios-text-color，它将所有段按钮被设置iOS应用程序的应用程序。

如果要覆盖为Android，为$segment-button-md-text-color

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

这会自动在构建过程中通过离子

如果你要覆盖一个特定HTML设置，设置的值将其设置在相应的scss文件中。例如用于home.html与选择home，在home.scss设置如下：

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

来源

2017-06-12 09:58:10

SCSS解决方案不工作:( – Milind

你指的是SCSS变量？ –

是SCSS变量 – Milind

更改离子段文字颜色

回答

相关问题