在 ionic 4+ 中为 ion-toolbar 阴影 dom 的 .toolbar-container 设置样式

Question

我试过很多方法。但没有工作。 期待这样的风格

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

你有什么解决办法吗？

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