React Hooks Обработчик событий useState со стилизованными компонентами

Question

У меня есть родительский div ImgClust1, который onClick. Я хочу, чтобы styleled-компоненты внутри него меняли стили в зависимости от состояния. По сути, с текущей структуры, при наведении курсора компоненты TopLine, RightLine, LeftLine и BotLine преобразуются и по существу отображаются. Я ищу способ использовать состояние, чтобы onClick, эти компоненты высоты / ширины стилей в зависимости от компонента настроить на основе состояния. Ниже приведена основная структура домашних компонентов:

Home.js:

import React, { useState } from 'react';
import Container from './Container';
import Box1 from './boxes/Box1';
import ImgClust1 from './imgClust/ImgClust1';
import TopLine from './imgHovers/TopLine';
import BotLine from './imgHovers/BotLine';
import LeftLine from './imgHovers/LeftLine';
import RightLine from './imgHovers/RightLine';

const Home = () => {

    const [fill, setFill] = useState(false);

return (
    <Container>
      <ImgClust1 onClick={() => setFill(!fill)}>
        <Box1>
            <img src= {img}/>
        <TopLine />
        <RightLine />
        <LeftLine />
        <BotLine />
         </Box1>
          </ImgClust1>
        </Container>
       )
}

export default Home;

ImgClust1.js:

import styled from 'styled-components';

const ImgClust1 = styled.div`
    display: inline-block;
    width: 41.667vw;
    top: 16.667vw;
    position: relative;
`;

export default ImgClust1;

Box1.js

import styled from 'styled-components';

const Box1 = styled.div`
   position: relative;
   height: auto;
   cursor: pointer;
   transition: 0.4s ease-in;
   overflow: hidden;
   display: block;
   width: inherit;
   :hover img {
      transform: matrix(1.1, 0, 0, 1.1, 0, 0);
   }
   :hover {
      z-index: 100 !important;
   }
   :hover div:nth-child(2) {
      transform: matrix(1,0,0,1,0,0);
      height: 30px;
   }
   :hover div:nth-child(3) {
      transform: matrix(1,0,0,1,0,0);
      width: 30px;
   }
   :hover div:nth-child(4) {
      transform: matrix(1,0,0,1,0,0);
      width: 30px;
   }
   :hover div:nth-child(5) {
      transform: matrix(1,0,0,1,0,0);
      height: 30px;
   }
   & img {
      position: relative;
      display: inline-block;
      width: 100%;
      height: auto;  
      z-index: -10;
      transition: 0.35s ease-in-out;
      transform: matrix(1, 0, 0, 1, 0, 0);
      :hover {
         transform: matrix(1.1, 0, 0, 1.1, 0, 0);
      }
    }
`;

export default Box1;

TopLines.js

import styled from 'styled-components';
import fill from '../Home';

const TopLine = styled.div`
    display: block;
    position: absolute;
    background-color: red;
    transition: 0.35s ease-in;
    transform: matrix(1,0,0,0,0,0);
    top: 0;
    transform-origin: top;
    left: 0;
    margin-top: -1px;
    width: 100%;
    height: ${fill ? '100%' : '1px'};
`;

export default TopLine;

Я думал, что мой метод useState достигнет желаемого результата, который я искал, но сейчас ничего не происходит на клике. Я не уверен, является ли мое состояние проблемой из-за того, как стилизованные компоненты вложены, или это связано с синтаксисом в компоненте TopLine, где я пытаюсь добиться изменения стиля. Любая помощь с благодарностью! Для контекста, я собираюсь использовать анимацию кликов на любом из изображений, подобных этому сайту: https://www.fabianfallend.com/ так что, по сути, я сейчас нахожусь, как это, но я ищу правильный метод для запуска анимации onClick, чтобызаполняется не только элемент div, на который нажали, но и другие элементы div на странице.

Answer 1

Вам нужно передать состояние вашим стилевым компонентам:

<ImgClust1 onClick={() => setFill(!fill)}>
  ...
  <TopLine fill={fill} />
  <RightLine fill={fill} />
  ...
</ImgClust1>

Тогда fill будет доступно в качестве реквизита к стилевому компоненту, и его можно использовать так:

const TopLine = styled.div`
  ...
  height: ${p => p.fill ? '100%' : '1px'};
`;

или:

const Box1 = styled.div`
  ...
  ${(p) =>
    p.fill
      ? " "
      : `
      :hover img {
        transform: matrix(1.1, 0, 0, 1.1, 0, 0);
      }
   `}
`;

Адаптация стилизованных компонентов на основе реквизита