[styled-components + typescript] 커스텀 컴포넌트에 기본 attributes 가져오기

 

내가 만든 custom input에는 기본 input에 내장되어있는 attributes(ex. value, onChange, placeholder...)에

내가 정의한 추가요소(ex. size, color, align...)이 덧붙여져야 한다.

 

이 때, 기본 내장 attributues의 type을 가져오는 코드는 다음과 같다.

 

import styled from 'styled-components';
import { InputHTMLAttributes } from 'react';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  size?: 24 | 32;
}

const Input = (props: InputProps) => {
  return <StyledInput {...props} />;
};

export default Input;

const StyledInput = styled.input`
  outline: 0;
  border: 0;
  background: none;
  border-bottom: 2px solid ${({ theme }) => theme.colors.mint};
  color: ${({ theme }) => theme.colors.mint};
  font-size: 24px;
  padding: 0.5rem;
`;