I can't find how to give a class to innermost div in react-window. In my case a have a flex wrapper containing list of data divs. But because react-window's innermost div separates my wrapper and list items I cannot properly align my list items. Is there a workaround either to access to innermost div and change it's class or directly to manipulate it's style.
Here is what react-window produces me as html.
<div style="position: relative; height: 600px; width: 100%; overflow: auto; will-change: transform; direction: ltr;">
<div style="height: 31900px; width: 100%;"> // ***here is where I want to style or give a class because there should be a flex wrapper here***
<div id="0" class="card product-card"><a class="product-title" href="/">
</div>
<div id="1" class="card product-card"><a class="product-title" href="/">
</div>
<div id="2" class="card product-card"><a class="product-title" href="/">
</div>
<div id="3" class="card product-card"><a class="product-title" href="/">
</div>
</div>
Thanks!
You can customize inner element and rows of each element
const Row = ({ index, style }) => (
<div
className={index % 2 === 0 ? "RowEven" : "RowOdd"}
style={{
...style,
top: `${parseFloat(style.top) + PADDING_SIZE}px`
}}
>
item {index}
</div>
);
const Example = () => (
<List
className="List"
height={150}
innerElementType={innerElementType}
itemCount={51}
itemSize={ITEM_SIZE}
width={300}
>
{Row}
</List>
);
const innerElementType = forwardRef(({ style, ...rest }, ref) => (
<div
ref={ref}
style={{
...style,
height: `${parseFloat(style.height) + PADDING_SIZE * 2}px`
}}
{...rest}
className="innerClass"
/>
));
here is Code sandbox example