오버플로 : 숨겨진 스타일 재정의 :

Question

오버플로 : 숨겨진 스타일을 테이블에서 재정의 할 수 있습니까? 나는 각 행에 드롭 다운을 여는 버튼을 갖고 싶습니다. 그러나 드롭 다운은 행을 오버플로하기 때문에 현재 숨겨져 있습니다.

Chrome 개발자 도구에서 .ReactVirtualized__Table__row 및 .ReactVirtualized__Table__rowColumn에서 수동으로 오버플로 : 숨김을 삭제하면 드롭 다운이 표시됩니다. 그러나, 나는 javascript 또는 css로 이것을 수행하는 방법을 찾지 못했습니다.

은 지금까지 나는 시도했다 :

추가 오버 플로우 다음 ReactVirtualized 클래스에 볼. 나는 원본 styles.css 파일과 별도의 포함 된 CSS 파일에서 이것을 시도했다. 내가 그들을 내 자신의 클래스를 추가하고 스타일을 할 수있었습니다,하지만 난 오버 플로우 스타일을 무시할 수 없었다

<ReactVirtualized.AutoSizer> 
    {({height, width}) => (
    <ReactVirtualized.Table 
     width={width} 
     height={height} 
     headerHeight={35} 
     rowHeight={(height - 35)/5} 
     rowCount={content.length} 
     rowGetter={({index}) => content[index]} 
     rowClassName="al-table-view__row" 
     headerClassName="al-table-view__header" 
     rowStyle={{overflowY: 'visible'}} 
     style={{overflowY: 'visible'}} 
    > 
     {this.getColumns(width)} 
    </ReactVirtualized.Table> 
)} 
</ReactVirtualized.AutoSizer> 

: Reactvirtualized.Table에 rowStyle과 스타일 소품을 추가

.ReactVirtualized__Grid{ 
    overflow: visible; 
} 
.ReactVirtualized__Table__Grid { 
    overflow: visible; 
} 
.ReactVirtualized__Table__row { 
    overflow: visible; 
} 
.ReactVirtualized__Table__rowColumn { 
    overflow: visible; 
} 

거기도. 어떤 제안이라도 대단히 감사하겠습니다.

Answer 1

overflow 스타일을 수정하는 것이 정답이 아닙니다. 단일 행이 오버플로 되어도 드롭 다운이 Table의 경계를 오버플로하지 않으므로 낮은 행에 동일한 문제가 발생합니다.

이런 종류의 일을 위해서 - 나는 당신이 react-portal을 체크 아웃 할 것을 제안합니다. Portal은 Z- 인덱스 스택에서 콘텐츠를 들어 올리며 (클리핑 문제를 피함) 시각적 위치 (상단/좌측)를 유지하면서 부모의 클리핑 rect/box 외부로 렌더링 할 수 있도록합니다. 그들은 List 또는 Table 안에 드롭 다운 메뉴와 같은 것들을 위해 완벽합니다.