하지만 사용해야 할 태그명이 유동적이거나 특정 컴포넌트 자체에 스타일링해 주고 싶다면 다음과 같은 형태로 구현할 수 있습니다.
예시 코드
// 태그의 타입을 styled 함수의 인자로 전달 const MyInput = styled('input')` background: gray; ` // 아예 컴포넌트 형식의 값을 넣어 줌 const StyledLink = styled(Link)` color: blue; `
노트 여기서 사용된 Link 컴포넌트는 나중에 리액트 라우터를 배울 때 사용할 컴포넌트입니다. 이런 식으로 컴포넌트를 styled의 파라미터에 넣는 경우에는 해당 컴포넌트에 className props를 최상위 DOM의 className 값으로 설정하는 작업이 내부적으로 되어 있어야 합니다. 다음 예시 코드를 확인해 보세요.
예시 코드
const Sample = ({ className }) => { return <div className={className}>Sample</div>; }; const StyledSample = styled(Sample)` font-size: 2rem; `;