如何更改离子按钮文本颜色

Question

这可能是一个愚蠢的问题，但我对 ionic 和 css 不太熟悉，所以有人能告诉我如何更改 ionic 按钮的文本颜色吗？

<div class="bottom-button" margin text-center>
     <button ion-button color="energized">
       Register
     </button>
</div>

这里，按钮颜色为黄色，文本颜色为黑色。 我想将文本颜色更改为白色。

Answer 1

用style修复你的代码

 <div class="bottom-button" margin text-center> <button ion-button style="color:red"> Register </button> </div>

或使用 css：

 button{ color:red }

 <div class="bottom-button" margin text-center> <button ion-button> Register </button> </div>

Answer 2

在 ionic-4 按钮文本颜色将是颜色对比，在定义的 variables.scss 文件中。

您可以通过创建自己的颜色来简单地更改按钮颜色以及按钮文本颜色。

在您的 .html 文件中

<ion-button class="loginButton" color="bgColor"  shape="round" id="loginButton (click)="loginAction()">

并在您的 src -> 主题 -> variables.scss 中

--ion-color-bgColor: #1c1c1c;
--ion-color-bgColor-rgb: 28, 28, 28;
--ion-color-bgColor-contrast: #ffffff;
--ion-color-bgColor-contrast-rgb: 255, 255, 255;
--ion-color-bgColor-shade: #414040;
--ion-color-bgColor-tint: #050404;

  .ion-color-bgColor {
--ion-color-base: var(--ion-color-bgColor) !important;
--ion-color-base-rgb: var(--ion-color-bgColor-rgb) !important;
--ion-color-contrast: var(--ion-color-bgColor-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-bgColor-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-bgColor-shade) !important;
--ion-color-tint: var(--ion-color-bgColor-tint) !important;
}

Answer 3

使用颜色设置为主要的ion-button ：

<ion-button color="primary">Save</ion-button>

在theme/variables.scss更改以下内容：

--ion-color-primary-contrast: #edce12;
--ion-color-primary-contrast-rgb: 237 ,206 ,18;

您还可以设置为二级、三级...

Answer 4

如果您想通过整个应用程序更改颜色，那么我建议您将 text-color 变量覆盖到您的 src/theme/variables.scss

$button-md-text-color: #ColorCode
$button-ios-text-color: #ColorCode