Как изменить цвет текста Ionic Button

Question

Это может быть глупый вопрос, но я не очень хорошо знаком с ionic и CSS, поэтому кто-нибудь может сказать мне, как изменить цвет текста ионной кнопки?

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

Здесь цвет кнопки - желтый, а цвет текста - черный. Я хочу изменить цвет текста на белый.

Answer 1

Если вы хотите изменить цвет во всем приложении, я бы посоветовал вам переопределить переменную text-color в свой файл src / theme / variables.scss

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

Answer 2

В кнопке ionic-4 цвет текста будет контрастным, как в определенном файле variables.scss.

Вы можете просто изменить цвет кнопки, а также цвет текста кнопки, создав собственный цвет.

в вашем .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;
}

Answer 3

исправить ваш код с помощью 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>