요구조건

search input이 focus될때 inputContainer div와 icon의 색을 바꿔주세요.

SearchInput의 구조

<SearchInputContainer {...rest}>
  <Input
    ref={inputRef}
    ...
  />
  <SearchIcon onClick={handleIconClick}>
    <Icon icon="search" />
  </SearchIcon>
</SearchInputContainer>

SearchInput을 사용하는 곳의 구조

<SearchInputContainer>
  <SearchInputOverride onChange={handleSearchInputChange} />
</SearchInputContainer>

처음 시도한 방법

const SearchInputOverride = styled(SearchInput)`
  & input:focus {
    border: 1px solid blue;
 
    & + span > i {
      border: 1px solid blue;
    }
  }
 
  & span i {
    color: gray;
  }
`;

상위 container div가 아닌 input 자체에 border가 먹게 됨.

:focus-within

포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 선택해주는 선택자

const SearchInputContainer = styled("div")`
  & div:focus-within {
    border: 1px solid blue;
 
    & span i {
      color: blue;
    }
  }
 
  & span i {
    color: gray;
  }
`;

포커스를 받은 input의 부모인 SearchInputContainer에서 :focus-within 선택자를 사용해 스타일을 넣어주었다.