문제상황

styled component를 재활용하기 위하여 단위 컴포넌트를 만든 후, 다른 컴포넌트에서 import 하여 사용하려는 경우, 스타일링 적용안되는 현상 발생

// Input.js
...
function Input({ labelText, type, name, placeholder, onChange }) {
  return (
    <label>
      {labelText}
      <input
	type={type}
        name={name}
        placeholder={placeholder}
        onChange={onChange}
      />
    </label>
  );
}

해결방법

• className을 포함하고 있어야 함
  https://styled-components.com/docs/basics#extending-styles
  
  
• 아래와 같이 수정

function Input({ labelText, className, type, name, placeholder, onChange }) {
  return (
    <label>
      {labelText}
      <input
        className={className}
        type={type}
        name={name}
        placeholder={placeholder}
        onChange={onChange}
      />
    </label>
  );
}