[React] styled-components props로 유동적인 스타일 적용

공식 문서

https://styled-components.com/docs/basics#passed-props

styled-components: Basics

 

- 구현하고 싶은 화면

- 구현 코드

 

- 구현 순서

1. UnderLIne components에 translateX라는 작명으로 useState에서 할당한  값("-101%)을 넣습니다.

2. props parameter 에서 props.translateX 의 변수를 가져와 넣습니다.

3. UnderLine 의 부모 styled-components인 MenuItem 스타일에 overflow : hideen 속성을 넣어 UnderLine을 숨깁니다.

4. onMouseOver(마우스를 올렸을때) onMouseOut(마우스가 벗어났을때)이라는 이벤트를 넣고 setTranslateX를 이용하여 애니메이션을 적용해 줍니다.