Как условно анимировать с помощью styled-компонентов

Question

Я пытаюсь анимировать строку, когда вход проверяется с помощью styled-компонентов.

Я пробовал с (a) и без (b) ключевых кадров, и оба возвращают (c):

(a)

import styled, { keyframes } from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
  display: block;
  position: absolute;
  height: 3px;
`;

const Animation = keyframes`
    from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    width: 70%;
    }

    to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100%;
    }
`;

const NavIconLine2 = styled(NavIconLine)`
  width: 70%;

  ${Input}:checked ~ & {
    animation: ${Animation} 0.15s ease-in-out;
  }
`;

(b)

import styled from 'styled-components';

const Input = styled.input``

const NavIconLine = styled.span`
  display: block;
  position: absolute;
  height: 3px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.15s ease-in-out;
  transition: 0.15s ease-in-out;
`;

const NavIconLine2 = styled(NavIconLine)`
  width: 70%;

  ${Input}:checked ~ & {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100%;
  }
`;

(c)

function Component {
  return (
    <Input type="checkbox" id="menu" />
    <NavIcon for="menu">
      <NavIconLine1 />
    </NavIcon>
  )
}

Я думаю, что, возможно, проблема в нацеливании элемента в "$ {Input}: флажок ~ & {...}", поскольку "~ &" относится к брату, а не к брату родителя? Если это так, возможно ли нацелиться на него?

Спасибо!

Answer 1

Решено:

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

const Input = styled.input`
  display: whatever;

  :checked + ${NavIcon} {
    ${NavIconLine1} {
      animation: whatever;
    }
  }
`;