Question

这可能是一个愚蠢的问题，但我对离子和css不是很熟悉，所以任何人都能告诉我如何更改离子按钮的文字颜色吗？

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

此处，按钮颜色为黄色，文本颜色为黑色。我想将文字颜色改为白色。

Answer 1

使用style

修复您的代码

＆＃13;

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

＆＃13;

或使用css：

＆＃13;

button{
color:red
}

＆＃13;

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

＆＃13;

Answer 2

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

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

Answer 3

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

使用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;

您还可以将其设置为第二，第三...

如何更改Ionic Button文本颜色

4 个答案: