230928 개발일지 TIL - React에서 Styled-components로 Input File 스타일링

React에서 Styled-components로 Input File 스타일링

import styled from 'styled-components';

const StyledInput = styled.input`
  background-color: #f9f9f9;
  padding: 10px;
`;

원하는 CSS 속성과 값들을 작성한다.

<StyledInput type="file" accept="image/*" onChange={onChangeImageFile} ref={fileInputRef} />

위의 코드에서

<StyledInput />

은 커스텀 스타일드 컴포넌트이다. 이제 해당 컴포넌트의 CSS 속성들이 적용되어 일반적인 input 태그 대신에 생성된 StyledInput 컴포넌트를 사용하여 렌더링할 수 있다.