프론트엔드/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;