react-window giving a class to innermost div

Question

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!

score 1 · Accepted Answer · answered May 31 '22 at 11:28

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

react-window giving a class to innermost div

1 Answers1