2

我使用 styled-components 进行媒体查询。但是对于 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>
4

0 回答 0