프론트엔드/React
[REACT] 파일 제출 버튼 스타일링(input type="file") with 스타일드 컴포넌트
순코딩
2023. 11. 7. 17:54
import styled from '@emotion/styled';
import React from 'react';
const FileSelectButton = ({onChange}) => {
return (
<>
<FileSelectButton_Container>
<FileSelectButton_Label for="file">파일찾기</FileSelectButton_Label> // 라벨로 스타일링 할 거임
<FileSelectButton_Input type="file" id="file" onChange={onChange}></FileSelectButton_Input>
</FileSelectButton_Container>
</>
);
};
export const FileSelectButton_Container = styled.div`
`;
export const FileSelectButton_Label = styled.label`
display: inline-block;
`;
export const FileSelectButton_Input = styled.input`
display: none; // 기존 버튼 숨기기
`;
export default FileSelectButton;