Ionic 4 和 Angular 5 离子按钮颜色和属性不起作用

Question

我正在使用 ionic 4 和 angular 5，由于某些原因，下面的 Press Button ion-buttons 元素没有设置颜色或任何属性按钮，我已经尝试了我知道的两种设置颜色的方法，但是没有任何效果？

<ion-row>
      <ion-col col-12>
        <ion-card>
          <ion-card-header>
            <h1>Companies</h1>
          </ion-card-header>
          <ion-card-content>
            <ion-row>
              <ion-col col-md-4>
                <ion-label>Comp</ion-label>
                <ion-select [(ngModel)]="filter_data_quick_sector" multiple="true" interface="popover"
                      (ionChange)="quickSearch()">
            <ion-option *ngFor="let sector of sectors" value="{{ sector }}">{{ sector }}</ion-option>
          </ion-select>
              </ion-col>
              <ion-col col-md-4>
                <ion-label>Country</ion-label>
                <ion-select [(ngModel)]="filter_data_quick_country" multiple="true" interface="popover"
                      (ionChange)="quickSearch()">
            <ion-option *ngFor="let country of countries" value="{{ country }}">{{ country }}</ion-option>
                </ion-select>
              </ion-col>
              <ion-col col-md-4>
                <ion-label>Investment</ion-label>
                <ion-select [(ngModel)]="filter_data_quick_investment_type" multiple="true" interface="popver"
                      (ionChange)="quickSearch()">
            <ion-option *ngFor="let investment_type of investment_types" value="{{ investment_type }}">{{
              investment_type }}
            </ion-option>
          </ion-select>
            **<ion-row text-right>
                <ion-col col-md-6 offset-1="">
                  <ion-buttons slot="primary" fill="solid" style="--background:blue" size="small">
                    Press Button
                  </ion-buttons>
                </ion-col>
              </ion-row>**
              </ion-col>
            </ion-row>
            <ion-row>

Answer 1

您需要使用颜色字段来更改按钮颜色

<ion-button color="secondary">Button</ion-button>

颜色在 src/app/theme/variables.scss

中定义

  /** secondary **/
  --ion-color-secondary: #0cd1e8;
  --ion-color-secondary-rgb: 12, 209, 232;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0bb8cc;
  --ion-color-secondary-tint: #24d6ea;

我还注意到您用复数 s 称呼元素 <ion-buttons>。我觉得应该是<ion-button>

Answer 2

刚刚意识到我应该将 ion-button 属性放在一个按钮元素中，该按钮元素包裹在一个 ion-buttons 元素中，用于 angular 和我正在使用的 ionic 版本，如下所示：

      <button ion-button slot="" offset-2="">Apply</button>
    </ion-buttons>```

Ionic 4 和 Angular 5 离子按钮颜色和属性不起作用

Ionic 4 and Angular 5 ion-buttons color and attributes not working

ionic-framework

angular

ionic4

angular5