styled component에서 import 사용 시 style 적용 안 되는 경우

mementomori·2021년 5월 4일
0

문제상황

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>
  );
}
profile
21c Carpenter

0개의 댓글