Reactjs react窗口和样式化组件如何协同工作？

我使用样式化组件进行媒体查询。但是当涉及到react窗口组件时，我不知道如何做，因为react窗口需要使用道具来设置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>

const ImgStyle=styled.img`
宽度：200px；
高度：200px；
@媒体屏幕和屏幕（最大宽度：800px）{
宽度：150px；
高度：150像素；
}
`;
const GridDiv=styled（网格）`
@媒体屏幕和屏幕（最大宽度：800px）{
宽度：450px；
高度：300px；
}
`;
const imggridiv=styled.div`
@媒体屏幕和屏幕（最大宽度：800px）{
宽度：150px！重要；
高度：150px！重要；
}
`;
常量单元格=（{columnIndex，rowIndex，style}）=>(
{imgsArray[rowIndex][columnIndex].alt}

);
{Cell}

你已经弄明白了吗？我遇到了同样的问题。。