如何更改Ionic按钮的文本颜色

Question

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

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

这里，按钮颜色是黄色的，文字颜色是黑色的。我想把文字颜色改成白色。

- Riddhi

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文件中定义的color-contrast。您可以通过创建自己的颜色简单地更改按钮颜色和按钮文本颜色。

在您的.html文件中：

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

在你的 src -> theme -> 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;
}

- komara

Answer 3

使用颜色设置为primary的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;

你还可以设置为第二、第三级等级。

- BorisD

---

谢谢你，你帮我省了几个小时的时间 :) - Stefan Sprenger

Answer 4

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

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

- Prashant

---

不，我只需要一个按钮。 - Riddhi