react-window 和 styled-components 如何协同工作？

Question

我使用样式组件来进行媒体查询。但是当涉及到react-window组件时，我不知道该怎么做，因为react-window需要使用props来设置ColumnCount，ColumnWidth...

const ImgStyle = styled.img`
    width: 200px;
    height: 200px;
    @media screen and (max-width: 800px) {
        width: 150px;
        height: 150px;
    }
`;
const GridDiv = styled(Grid)`
    @media screen and (max-width: 800px) {
        width: 450px;
        height: 300px;

    }
`;
const ImgGridDiv = styled.div`
    @media screen and (max-width: 800px) {
        width: 150px !important;
        height: 150px !important;
    }
`;


const Cell = ({ columnIndex, rowIndex, style }) => (
  <ImgGridDiv style={style}>
    <ImgStyle
        src={imgsArray[rowIndex][columnIndex].src}
        alt={imgsArray[rowIndex][columnIndex].alt}
    />
    <CaptionDiv>
        <p>{imgsArray[rowIndex][columnIndex].alt}</p>
    </CaptionDiv>
  </ImgGridDiv>
);

<GridDiv
    className="Grid"
    columnCount={3}
    columnWidth={200}
    height={400}
    rowCount={6}
    rowHeight={200}
    width={600}
>
    {Cell}
</GridDiv>

Answer 1

我最终所做的是将我的行包装在一个额外的

<div>

标签中，并将

style

属性传递给它。

const Cell = ({ columnIndex, rowIndex, style }) => (
<div style={style}>
  <ImgGridDiv>
    <ImgStyle
        src={imgsArray[rowIndex][columnIndex].src}
        alt={imgsArray[rowIndex][columnIndex].alt}
    />
    <CaptionDiv>
        <p>{imgsArray[rowIndex][columnIndex].alt}</p>
    </CaptionDiv>
  </ImgGridDiv>
</div>
);

<GridDiv
    className="Grid"
    columnCount={3}
    columnWidth={200}
    height={400}
    rowCount={6}
    rowHeight={200}
    width={600}
>
    {Cell}
</GridDiv>