我使用 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>