(React) Style-components attrs 간략 활용 예제

Style-component로 input 태그의 속성을 변경할 수 있다.

<input class="text_input" type="text" placeholder="html also good!" required />

<!-- in CSS -->
.text_input { color: red };

Html에서의 인풋과 스타일링.

" use strict ";

const TextInput = styled.input.attrs({
  type: "text",
  required: true,
  placeholder: "스타일 컴포넌트 꿀템!"
})`
  color: red;
`;

Style-components를 활용한 속성 값 변경 후 스타일링 한 모습.