在离子“离子项目”中编辑阴影dom

Question

我实现了一个表格，该表格非常宽（比屏幕宽得多），并且用户可以水平滚动。

最左边是一个任务行组件，该组件的元素带有“粘性”标头（.task-row_main类），使用css位置：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时，粘性标头断开。水平滚动会导致粘性标题从屏幕上滚动出来。

         

发生这种情况的原因是由于阴影圆顶样式：

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

.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

结果是，input-wrapper{overflow:visible}的数量更多，而不仅仅是<ion-item #ionItem appShadowCss shadowCustomCss='.input-wrapper{overflow:visible;} .item-native{overflow:visible;} .item-inner{overflow:visible;}'>。

必须这样做：

@for /r "c:\FileStore" /d %F in (.) do @(dir /b "%F" | findstr "^" >nul || echo %~fF)