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

Question

Я действительно запутался, почему это не работает.Я использую библиотеку стилевых компонентов, и на самом деле у меня проблема с меню гамбургера.Он изменяется только тогда, когда отображается флажок.Он должен работать только с CSS, но у него нет никаких предложений?

const HamburgerCnt = styled.div`
  cursor: pointer;
  position: absolute;
  top: 35px;
  right: 41px;
  height: 28px;
  width: 30px;

  input {
    display: none;
  }

  input + label {
    position: absolute;
    top: 12px;
    right: 0px;
    width: 30px;
    height: 2px;
    background: #fff;
    display: block;
    transform-origin: center;
    transition: .5s ease-in-out;
    &:after,
    &:before {
      transition: .5s ease-in-out;
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
    }
    &:before {
      top: -10px;
    }
    &:after {
      bottom: -10px;
    }
  }

  input:checked + label {
    transform: rotate(45deg);
    &:after {
      transform: rotate(90deg);
      bottom: 0;
    }
    &:before {
      transform: rotate(90deg);
      top: 0;
    }
  }
`;

и компонент выглядит так

<HamburgerCnt>
      <input type="checkbox" name="check" />
      <label htmlFor="check" />
</HamburgerCnt>

Answer 1

Вы должны использовать check как id ввода, а не его имя.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Using_the_for_attribute