爱奥尼亚4:行动计划css问题

使用 ::ng-deep 在css中

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

在变量中写下以下内容。scss:

.red {
  --color: red;
}

以及组件的SCS中的以下内容:

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

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

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

添加需要修改的样式,并将其放置在 变量。scss 正如我在下面所做的。

.行动表。sc离子行动表{ 颜色:红色; }

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

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

试试上面的代码。习惯于 css-class 而不是 cssClass .

参考 this 对于上述问题。