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

Junghyun Park·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>
  );
}

해결방법

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개의 댓글