离子4：操作表CSS问题

Question

Ionic4操作表控制器未占用CSS。

这是我的ts代码

 const actionSheet = await this.actionSheetController.create({
      mode: 'md',
      cssClass: 'match-item-action-sheet red',
      buttons: [{ ...
      }]
    });

这是我的CSS类

.match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.red{
    color:red;
}

这是实时代码https://ionic-v4-xbwrsj.stackblitz.io/action-sheet

以下是类match-item-action-sheet的预期行为

Answer 1

在CSS中使用::ng-deep

See working code

::ng-deep .match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

::ng-deep .red{
    color:red;
}

编辑！ 根据您附加到问题的图片

将样式设置为.action-sheet-group.sc-ion-action-sheet-md

在CSS中：

::ng-deep .match-item-action-sheet .action-sheet-group.sc-ion-action-sheet-md{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

::ng-deep .red .action-sheet-group.sc-ion-action-sheet-md{
    color:red!important;
}

Answer 2

const actionSheet = await this.actionSheetController.create({
  mode: 'md',
  css-class: 'match-item-action-sheet red',
  }]
});

尝试上面的代码。使用css-class代替cssClass。

有关以上问题，请参考this。

Answer 3

在您的variables.scss中写入以下内容：

.red {
  --color: red;
}

以及组件的scss中的以下内容：

.action-sheet-group {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

Answer 4

“动作表按钮”的颜色由下面的类.action-sheet-button.sc-ion-action-sheet-ios控制，或者您可以在浏览器检查器中进行验证。

如果仅需要更改删除部分，请使用此类.action-sheet-destructive.sc-ion-action-sheet-ios。

添加您需要修改的样式，然后将其放入 variables.scss ，如下所示。

.action-sheet-destructive.sc-ion-action-sheet-ios { 红色; }

此外，您必须类似于android中的相关类进行更改。