Angular Ionic CSS 未应用

Question

我正在做一个 Ionic 和 Angular 项目。我只是不知道如何控制包裹在 ion-item 周围的元素的填充。我查看了几种解决方案，但似乎都没有：

我已经查看了这两个资源，但我无法让我的间距来反映我的样式表。

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

Why Ionic 5 content padding is not working?

例如，我有以下内容：

              <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;
}

Answer 1

您需要使用以下方式将 ion-col 填充设置为 0。它是如此简单。 删除您添加的类。

ion-row>ion-col {
   padding: 0px !important;
}

尝试使用 !important 属性。如果这不起作用，请尝试在 css 中给出以下类并在 HTML 中使用相同的类。

.padding-zero {
    padding: 0px !important;
}

尝试告诉我它是否适合您。