如何在离子吐司（嵌套阴影元素）中设置离子图标的样式？答案

【问题标题】：How to style an ion-icon inside an ion-toast (nested shadow elements)?如何在离子吐司（嵌套阴影元素）中设置离子图标的样式？
【发布时间】：2021-10-22 19:01:35
【问题描述】：

我尝试了多种方法：

设置内联样式，但看起来@ionic 在生成 toast 时删除了 style="...." 属性
CSS 变量，但不知道如何设置不公开 api (ion-icon) 的嵌套阴影元素的样式

目前我在做：

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

}

这是我的吐司的样子：

有什么想法吗？

【问题讨论】：

标签： css angular ionic-framework shadow-dom

【解决方案1】：

解决方案 1

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

解决方案 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 文件来更改 ion-icon 大小... 添加一个带有图标的按钮，然后设置它的样式：

page.ts:

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

page.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)”。

【讨论】：