Css ionic 4+；中的ion工具栏阴影dom的工具栏容器；

我试过很多方法。但不起作用。 希望你喜欢这种风格

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

---

您有什么解决方案吗？

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

ng生成指令允许溢出

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 appAllowOverflow>
    ...
</ion-toolbar>

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