在 ionic 4+ 中设置 ion-toolbar shadow dom 的 .toolbar-container答案

【问题标题】：Styling .toolbar-container of ion-toolbar shadow dom in ionic 4+在 ionic 4+ 中设置 ion-toolbar shadow dom 的 .toolbar-container
【发布时间】：2021-04-01 13:25:50
【问题描述】：

我尝试了很多方法。但不工作。期待这样的风格

ion-toolbar {
    contain: none;
    .toolbar-container {
        overflow: visible;  // not working
        contain: none;  // not working
    }
}

你有什么解决办法吗？

【问题讨论】：

标签： css ionic-framework dom sass ionic4

【解决方案1】：

我使用新指令解决了这个问题：

ng generate directive allow-overflow

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appAllowOverflow]'
})
export class AllowOverflowDirective {

  constructor(el: ElementRef)
  {
    let toolbar : HTMLElement = el.nativeElement;
    setTimeout(() => {
      let container : HTMLElement = toolbar.shadowRoot.querySelector(".toolbar-container");
      if (container)
      {
        // (as any) is just to suppress a warning
        (container.style as any).contain = "none";
        container.style.overflow = "visible";
      }
    });
  }
}

然后我像这样添加了<ion-toolbar>：

<ion-toolbar appAllowOverflow>
    ...
</ion-toolbar>

我还为 <ion-toolbar> 添加了这条 CSS 规则：

ion-toolbar[appAllowOverflow]
{
  contain: none;
}

【讨论】：