Как обратится к соседнему элементу в styled-components?

Question

[Alexander]

Подскажите пожалуйста как я могу обратится к другому элементу в styled-components?
Нужно для NavIcon задать стили при получении пропсов в SearchField

export const NavIcon = styled.svg`
  font-size: 20px;
  margin-right: 15px;
  color: inherit;
  &:hover {
    color: #000;
    cursor: pointer;
  }
`

export const SearchField = styled.input<{ isOpen: boolean }>`
  border-radius: 50px;
  border: 2px solid ${(props) => props.theme.colors.primary};
  padding: 8px 0;
  outline: none;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  width: 0;
  margin-right: 15px;
  ${(props) => props.isOpen && `opacity: 1; width: 200px; padding: 8px 15px;`};
  ${(props) => props.isOpen && NavIcon...

`

<SearchForm ref={searchRef} onSubmit={(e) => e.preventDefault()}>
      <NavIcon
        as={BiSearch}
        onClick={() => {
          setIsOpen(!isOpen)
        }}
      />
      <SearchField isOpen={isOpen} type='text' placeholder='Search...' />
    </SearchForm>

Comments

[n1ksON]

А нельзя просто те же пропсы передать и NavIcon и задать соответствующие стили?

[Alexander]

n1ksON, можно, но думал сделать это как в scss

Answer 1

[Иван В]

В css можно обратиться к соседнему элементу через "+". Он также работает в styled-components.

export const NavIcon = styled.svg`
  font-size: 20px;
  margin-right: 15px;
  color: inherit;
  &:hover {
    color: #000;
    cursor: pointer;
  }

  + ${SearchField} {
    ....
  }