why I set Item and List component but only show one item in page?

[zhangwei900808]

import {VirtuosoGrid} from 'react-virtuoso'
import {Row, Col} from "antd"

<VirtuosoGrid
      useWindowScroll
      overscan={200}
      data={props.urls}
      components={{
        Item: (props)=>{
          return <Col xs={grid.xs} sm={grid.sm} md={grid.md} lg={grid.lg} xl={grid.xl} xxl={grid.xxl}>
            {props.children}
          </Col>
        },
        List: (props)=>{
          return <Row gutter={[12, 12]}>
            {props.children}
          </Row>
        },
      }}
      itemContent={(index, url) =>
          <div className={styles.item} key={index}>
             ...
          </div>
        }
/>

[petyosi]

No idea what your problem is. Here's a working example from the test suite.

[zhangwei900808]

@petyosi Its means that I must use @emotion/styled and cant use my component?

[Fr0stmourne]

@zhangwei900808 I had the same issue. The solution is to use React.forwardRef method like this:

List: React.forwardRef(({ style, children }, ref) => (
  <div
    ref={ref}
    style={style}
  >
    {children}
  </div>
))

[paulm17]

@Fr0stmourne solution should really be the default. Especially with next13 and css-in-js being deprecated. Many devs are moving to either tailwind, modules css, panda or other css solutions. Emotion right now is largely deprecated.