Angular Ionic CSS 未应用

Posted 2023-03-13

【中文标题】Angular Ionic CSS 未应用

【英文标题】：Angular Ionic CSS not being applied

【发布时间】：2020-11-19 10:10:22

【问题描述】：

我正在做一个 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;

【参考方案1】：

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

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

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

.padding-zero 
    padding: 0px !important;

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

【讨论】：

我在我的项目中使用相同的，它为我工作。你可以创建 stackblitz 以便我检查出了什么问题。

我为我正在尝试做的事情添加了更多代码。我添加的这一行是我希望我的行没有任何填充的地方：class="ion-text-center no-padding"。这似乎应该如此简单，但我无法让它发挥作用。我还尝试将我的文本放在行中，但使用 ionic 建议的方法没有运气。

创建堆栈闪电战

我试过了，但我没有看到 angular ionic 选项。只有普通的角度并且没有任何样式表模板。无论如何，这里是：stackblitz.com/edit/ionic-awjkrm?file=pages%2Fhome%2Fhome.ts。我只是希望能够控制这些行之间的填充。