Как реагируют окно и стилевые компоненты? - PullRequest
Новая
       8

Как реагируют окно и стилевые компоненты?

0 голосов
/ 24 марта 2020

Я использую styled-компоненты для выполнения медиа-запросов. Но когда дело доходит до компонента реагирующего окна, я не знаю, как это сделать, так как реагирующее окно должно использовать реквизиты для установки 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>
...