styled-components2 [React] styled-components props로 유동적인 스타일 적용 공식 문서 https://styled-components.com/docs/basics#passed-props styled-components: Basics Get Started with styled-components basics. styled-components.com - 구현하고 싶은 화면 - 구현 코드 - 구현 순서 1. UnderLIne components에 translateX라는 작명으로 useState에서 할당한 값("-101%)을 넣습니다. 2. props parameter 에서 props.translateX 의 변수를 가져와 넣습니다. 3. UnderLine 의 부모 styled-components인 MenuItem 스타일에 overflow : hideen 속성을 넣어 UnderLine을 .. 2023. 2. 25. [React] styled-components 란? styled-componets 란? - 컴포넌트 기반 방식으로 css스타일을 작성하고 관리할 수 있는 React 라이브러리입니다. 구성 요소 내에서 직접 스타일하며 의도하지 않은 스타일이 다른 구성 요소로 유출 되는 위험을 제거합니다. // 설치 $ npm install --save styled-components import styled from 'styled-componets' const DivStyle = styled.div` width : 100px; height : 100px; ` const TestContainer = ()=>{ return ( 스타일컴포넌트 ) } export default TestContainer styled-components의 장점 - 정의된 스타일은 정의된 요소에만 적.. 2023. 2. 6. 이전 1 다음
