🐣 부모 요소의 상태에 따라 자식 요소도 스타일 변화 부여하기

우리 서비스에서는 사이드바가 있고, 각각의 li에 hover를 하면 색상이 변경되어야 한다.

아래 사진은 사이드바의 일부다.

여기서 li가 hover 될 때 어떻게 button과 p 태그의 색상을 바꿀 수 있을까?

처음에 생각한 것은,

 <li className="hover:[&_>]:text-orange hover:[&_>]:fill-orange ... >

이런 식으로 li에 hover가 됐을 때, 직계 자손을 선택해서 색상을 바꿔주려고 했다.

하지만 각각 hover가 됐고 동시에 되진 않았다.

useState로 상태를 부여하는 것은 너무 과하다고 생각했다.

찾아보니 tailwind에서는 부모 상태에 기반하여 스타일을 할 수 있는 group 선택자가 있었다! (비슷하게 형제에 기반한 peer도 있다.)

사용법은 간단하게 부모에 group className을 명시하고, hover, active, focus 상태일 때 자식에세 스타일을 부여하고 싶다면 group-hover, group-active, group-focus 와 같이 기입하면 된다.

  <li className="group flex items-center gap-10">
    <button
      type="button"
      className="fill-gray group-hover:fill-orange transition-colors"
    >
      {icon}
    </button>
    <p
      className={cn(
        'text-gray display-medium16 whitespace-nowrap',
        'group-hover:text-orange transition-all group-hover:font-bold',
        isHovered ? 'display' : 'hidden',
      )}
    >
      {text}
    </p>
  </li>

• 부모인 li 태그에 group을 부여
• 자식인 button과 p 태그에 group-hover 추가