import styled from 'styled-components';
import Button from '../button/button';

const StyledButton = styled(Button)`
background-color: ${props => props.theme.color.point};
`;

const Input = styled.input`
width: 100%;
`;

const ModifyTweet = () => {
return (
<form>
<Input type="text" />
<StyledButton
name='Update'
callback={()=>{console.log('update')}}
className
/>
<StyledButton
name='Cancel'
callback={()=>{console.log('cancel')}}
className
/>
</form>
)
};



이렇게 form 안에 import된 Button (외부컴포넌트) 두개를 render하는 컴포넌트거든


스타일드컴포넌트로 저 두 버튼의 색깔을 다르게 하고싶어


구체적으로는 Update는 그대로 파란색 쓰고, Cancel을 빨갛게 만들거야


시도해본 방법으로는 Cancel 버튼에 className props를 지워서 props가 전달된 Update에만 색깔 씌우고


porps가 전달 안된 놈은 빨강색으로 지정하려고 했었음

${props => props ? props.theme.color.point} : 'red' };


근데 className을 전달 안하니까 컴파일 에러남 ㅅㅂ 타스 쓰고있어서 interface에 정의된대로 무적권 전달해야 하는듯

=> ㅅㅂ 지금 다시 생각해보니 className을 전달 안하면 아예 이 명령이 전달안되는구나 ;;ㅋㅋ


왠지 모르겠는데 optional로 interface {className?: any } ㅇㅈㄹ 해도 컴파일 에러남 개짜증남