如何修改Ionic按钮的文字颜色？Ionic与CSS新手求助

嘿，我来帮你搞定这个问题！针对你现有按钮要把黑色文字改成白色的需求，这里有几个实用的方案：

1. 快速方案：内联样式直接修改 #

如果你只需要改这一个按钮，直接给按钮加内联样式最省事，优先级足够覆盖Ionic的默认样式：

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

2. 复用方案：自定义CSS类 #

要是以后还有其他按钮需要同样的样式，建议定义一个自定义类，方便复用：
首先在对应的页面样式文件（比如page-name.scss）或者全局样式文件（global.scss）里添加：

.white-btn-text {
  color: white !important;
}

然后给按钮加上这个类：

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

注：加!important是为了确保自定义样式能覆盖Ionic内置的按钮文字颜色样式

3. 全局方案：修改Ionic主题变量 #

如果希望所有使用color="energized"的按钮都自动变成白色文字，可以修改Ionic的主题变量。找到src/theme/variables.scss文件，找到$energized-contrast变量，把默认的黑色改成白色：

// 原来的默认值可能是 $energized-contrast: #000 !default;
$energized-contrast: #fff !default;

这样所有用energized配色的按钮文字都会变成白色，适合统一调整整个应用的风格。

内容的提问来源于stack exchange，提问作者Riddhi Shah