Question

根据问题，如何更改离子按钮内文本的颜色？这是我的按钮的代码

<button ion-button block (click) = "submitForm()">Submit</button>

我尝试了以下各种方法

<button ion-button block (click) = "submitForm()"><sub ion-text color = "light">Submit</sub></button>

<button ion-button block (click) = "submitForm()" ion-text color = "light">Submit</button>

<button ion-button block (click) = "submitForm()"><span ion-text color = "light">Submit</span></button>

<button ion-button block (click) = "submitForm()" class= "font-white">Submit</button>

在上面的最后一个示例中，我将.font-white{color: #fff !important;}放入了app.scss

但没有任何效果。

Answer 1

只需将按钮的style属性替换为class的名称，然后在您的app.scss中但在下面的代码中（假设您将类名命名为font-white）

 .font-white
  {  
    color : #fff !important; 
   }

Answer 2

通过以下方式修改 component.html 和 component.scss 文件，

<button ion-button block (click)="submitForm()" class="custom-button">Submit</button>

在您的 component.scss 中，

.custom-button{
  color: #000;
}

Answer 3

这在 ionic-4 中运行良好：-

<button ion-button block class="font-white">Submit</button>

在 appcomponent.scss 中

.font-white {
    color: #fff;
  }

对于 Ionic-5：-

 <ion-button class="font-white">Submit</ion-button>

在 scss 文件中

  .font-white {
    --color: #fff;
  }

Answer 4

如果你只想要白色，那么不要创建任何 scss 类随便写

<ion-button fill="clear" class="text-white" (click)="btnClickFN()">
        save
      </ion-button>

否则，如果您想自定义颜色，请在 .scss 中创建类它将应用于您编写 <ion-button></ion-button> 标签

的所有标签

ion-button{
color: #00FF00; // green color
}

否则你只能在特定的一个按钮上给颜色然后请在文件中创建如下的自定义类 .sccs

.btnColor{
  color: #00FF00; // Green color
 }

在 .html 文件中:: 只需将类放在 <ion-button> 标签中，并在 .scss 文件中输入名称

 <ion-button fill="clear" class="btnColor" (click)="btnClickFN()">
            save
          </ion-button>

更改离子按钮的文本颜色

4 个答案: