css - 在 Ionic `ion-item` 中编辑影子 DOM

Question

我实现了一个表格，它很宽(比屏幕宽很多)，用户可以水平滚动。

在最左边，是一个任务行组件，它有一个带有“粘性”标题的元素(.task-row_main 类)，通过使用 css position: sticky，它在水平滚动时不会移动。

.task-row_main {
    display: flex;
    align-items: center;
    max-width: 230px;
    flex-shrink: 1;
    flex-grow: 1;
    position: -webkit-sticky;
    position: sticky;
    left: 1px;
}

当我将我的任务行组件添加到 ion-item 时，粘性 header 中断。水平滚动会导致粘性标题滚出屏幕。

<ion-item>
    <task-row>
    </task-row>
</ion-item>

发生这种情况的原因是影子 DOM 样式:

当我查看它时，我注意到它为什么不起作用，因为 input-wrapper 上的 overflow: hidden:

.input-wrapper{
    overflow:hidden;
}

如何覆盖输入包装器的 overflow 属性以将其设置为 visible？

我试过创建指令并覆盖 css，但没有成功:

指令:

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
@Directive({
  selector: '[appShadowCss]'
})
export class ShadowCssDirective implements OnChanges {
  @Input() shadowCustomCss: string;

  ngOnChanges(): void {
    const shadow = this.el.nativeElement.shadowRoot || this.el.nativeElement.attachShadow({ mode: 'open' });
    if (shadow) {
      let innerHTML = '';
      innerHTML += '<style>';
      innerHTML += this.shadowCustomCss;
      innerHTML += '</style>';
      shadow.innerHTML += innerHTML;
    }
  }

  constructor(private el: ElementRef) {

  }
}

html:

 `<ion-item appShadowCss shadowCustomCss='.input-wrapper{overflow:visible;}'>`

如何在 ion-item 中编辑此影子 DOM 以设置 overflow: visible？

Answer 1

原来还有更多overflow:hidden而不仅仅是在 input-wrapper{overflow:visible} .

必须这样做:

<ion-item #ionItem appShadowCss shadowCustomCss='.input-wrapper{overflow:visible;} .item-native{overflow:visible;} .item-inner{overflow:visible;}'>