css - 如何在 ion-toast(嵌套的阴影元素)中设置 ion-icon 的样式？

Question

我尝试了多种方法:

1. 设置内联样式，但看起来 @ionic 在生成 toast 时删除了 style="...." 属性

2. CSS 变量，但不知道如何设置不公开 api( ionic 图标)的嵌套阴影元素的样式

目前我在做:

let opts = { message: '<ion-icon name="icon-name" style="font-size: 50px;...other styles..">' };
const toast = await this.toastController.create(opts);

Toasts 导出命名部分(消息)，但这还不够，因为我需要使图标比文本大。

ion-toast {  
  // this works
  &::part(message) {
        font-size: 1.2em;
  }      
  
  
  // None of this works and my goal is to style the ion-icon
  
  &::part(message) ion-icon {
        font-size: 1.2em;
  }      
  &::part(message) /deep/ ion-icon {
        font-size: 1.2em;
  }      

  &::part(message)::part(ion-icon) {
        font-size: 1.2em;
  }      

}

这是我的 toast 的样子:

有什么想法吗？

Answer 1

解决方案一

将 class="icon-large" 添加到您的 ionic 图标。

解决方案2

最简单的确实是在 ion-icon 元素中使用 style:"font-size:2em;" 属性，但是正确地注意到 Ionic(实际上是 Angular)从元素中删除了 HTML。解决方法是使用管道。它非常复杂(例如参见 https://medium.com/@ahmedhamedTN/make-styles-work-when-dealing-with-innerhtml-in-angular-ac2d524ba001 )。

无解

我们可以让 SCSS 在 ion-toast 中设置消息本身的样式，方法如下:

ion-toast::part(message) {
 ...
}

但是不可能在消息中设置 ion-icon 样式(见下面的注释)。

解决方案3

我们仍然可以获取 SCSS 文件来更改 ionic 图标的大小... 添加一个带有图标的按钮，然后设置它的样式:

页面.ts:

const opts = {
  ...
  buttons: [
    {
      side: 'start',
      icon: 'icon-name',
      handler: () => {},
    },
  ],
};
const toast = await this.toastController.create(opts);
toast.present();

页面.scss:

ion-toast::part(button) {
  height: auto;
  width: auto;
  font-size: 1.6em; // this sets actual icon size
}

为什么:

由于部分 toast 位于#shadow-root 中，从 SCSS 获取它们的唯一方法是使用组件本身分配的“::part()”。要查找可用的部分，请阅读文档: https://ionicframework.com/docs/api/toast#css-shadow-parts ，或打开检查器，找到 .ion-toast 并查看 #shadow-root 下的元素。对于 Ionic 5 Angular，我找到了 part=(container)、part=(message) 和 part=(button)。

请注意，part() 后面不能跟任何其他选择器。因此，不可能使左侧的图标变大，但保持关闭按钮的大小相同，因为它们都有“part=(button)”。