离子 3 更改离子卡 header 填充不会覆盖现有的

Question

我试图通过将 headers 填充更改为适合我的应用程序的内容来覆盖 ion-card 的现有 sass 样式。

我做了以下事情：

ion-card-header{
  .card-header-md{
    padding-right: 20px !important;
    padding-left: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

但没有任何改变。我尝试添加背景颜色以检查它是否获得样式：

ion-card-header{
  color: red;
  .card-header-md{
    padding-right: 20px !important;
    padding-left: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

并且颜色变成了红色。 但是card-header-md没有改变。我需要在 iOS 和 Android.

上更改它

这是一个stackblitz。

Answer 1

问题是 card-header-md class 与 ion-card-header class 处于同一级别。所以这应该有效：

ion-card-header {
  &.card-header-md {
    padding-right: 20px
    padding-left: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

我删除了 !important，因为我认为您实际上并不需要它们（只是在 new stackblitz demo 中尝试过，它在没有他们）。

离子 3 更改离子卡 header 填充不会覆盖现有的

Ionic 3 Changing ion card header padding is not overriding the existing one

sass

ionic-framework

ionic3