• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

CollapseButton이 토글할때마다 어떻게 화살표(?)모양이 css에서 바뀌는지 못찾겟습니다

22.12.03 19:21 작성 조회수 436

0

Direct Message 저 왼쪽의 아이콘(=CollapseButton)이 토글할때마다 바뀌는걸
css코드에서 찾고싶은데 제가 지식이 부족한건지 못찾겠습니다
스크린샷 2022-12-03 오후 6.51.49.png
스크린샷 2022-12-03 오후 6.53.55.png
스크린샷 2022-12-03 오후 6.54.17.png위의 사진을 보면 collapse: boolean으로 가져온거로 collapse일때

& i { transform: none; };

이게 실행되는건 알겠는데, 이게 실행되면
<i className="c-icon ..." (다른 attrs) /> 이 태그가
<i className="c-icon ..." (다른 attrs) transform=none; /> 이렇게 변하는데 (이거 맞나요?)
transform=none;이면 슬랙쪽에서 만든 p-channel_sidebar__section_heading_expand같은 p-가 달린 속성이 토글되는거 같습니다만,,

어떻게 다음의 속성이
& i { transform: none; };
부모태그인 button의 클래스를 바꾸게 하는건가요??-->css에서 부모태그의 클래스를 바꾸는건 들어본적이 생소해서요 (슬랙에서 제공하는 스타일시트url)
슬랙에서 내부적으로 p-channel_sidebar__section_heading_expand 속성이 있으면 자식i태그에 transform: none이 있으면 부모 클래스속성을 토글하는거 같긴한뎀,,

답변 1

답변을 작성해보세요.

1

이게 실행되는건 알겠는데, 이게 실행되면
<i className="c-icon ..." (다른 attrs) /> 이 태그가
<i className="c-icon ..." (다른 attrs) transform=none; /> 이렇게 변하는데 (이거 맞나요?)

이건 맞습니다.

부모 클래스를 바꾸는 게 아니라 애초에 버튼이 자기자신입니다.

버튼을 눌러서 버튼의 클래스가 바뀌는 것입니다. 버튼의 클래스가 바뀌면서 버튼의 자식인 i한테도 영향이 가는 것이고요.