angular - Angular Ionic CSSが適用されていません

Question

私は Ionic と Angular のプロジェクトに取り組んでいます。イオンアイテムにラップされた要素のパディングを制御する方法がわかりません。私はいくつかの解決策を見てきましたが、どれもうまくいかないようです:

これらのリソースの両方を調べましたが、スペースをスタイルシートに反映させることができません。

https://ionicframework.com/docs/layout/css-utilities#content-space

Ionic 5 コンテンツのパディングが機能しないのはなぜですか?

たとえば、次のものがあります。

              <ion-col size-lg="8" class="ion-padding">
                <ion-item lines="none">
                  <ion-label >{{stat.playerDisplayName}}</ion-label>
                </ion-item>
              </ion-col>
              
              <ion-col size-lg="2" class="ion-padding">
                <ion-item lines="none">
                  <ion-label>{{stat.goals}}</ion-label>
                </ion-item>
              </ion-col>

次のことを試しましたが、ファイルに何も変更はありません:

  ion-padding {
    padding: 0px;
  }

  ion-padding {
    --ion-padding: 0px;
  }

公式ドキュメントも使用しようとしましたが、役に立ちませんでした。私はやったしionic -v、それは6.10.0を示しています。パッケージファイルを確認したところ、次のように表示されました。

"@ionic-native/core": "^5.0.7",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0"

私は何が欠けていますか？

ここに私の完全なコードがあります:

HTML ファイル

<ion-row *ngFor="let item of items; let i = index" class="ion-text-center no-padding">
  <ion-col>
    <ion-item>
      <h5>{{product.productName}}</h5>
    </ion-item>
  </ion-col>
</ion-row>
<ion-row>

    <ion-col>
      <ion-item>
        <ion-select [(ngModel)]="selectedProductId">
          <ion-item>
            <ion-select-option value="">Select Product</ion-select-option>
          </ion-item>
          <ion-item *ngFor="let product of Products">
            <ion-select-option [value]="product.productId">{{product.productName}}</ion-select-option>
          </ion-item>
        </ion-select>
      </ion-item>
    </ion-col>

</ion-row>
<ion-row>
  <ion-item>
    <ion-button color="success" (click)="onAddProduct()">
      Add Product
    </ion-button>
  </ion-item>
</ion-row>

CSSファイル

.no-padding{
    padding: 0px;
}