const Navitems = styled.ul`
display: flex;
flex: 1 1 50%;
border: 1px solid red;

`;
const NavButton = styled(Button)`
background-color: ${props => props.theme.color.bg_header}
color: ${props => props.theme.color.text_header}
`;


const Header = () => (
<Navitems>
<li><NavButton name='All Tweets' callback={() => console.log('All Tweets')} /></li>
<li><NavButton name='My Tweets' callback={() => console.log('My Tweets')} /></li>
<li><NavButton name='Logout' callback={() => console.log('Logout')} /></li>
</Navitems>
);



Button 컴포넌트를 꾸미려고 NavButton을 만듦 ㅇㅇ

그럼 이제 Button 컴포넌트로 가서 props.className 연결해줘야 하잖아?


interface ButtonProps {
name: string;
callback: any;
className: any;
}

const Button = ({name, callback, className}: ButtonProps) => {
const onClick = () => {
callback();
}

return (
<button onClick={onClick} className={className}>
{name}
</button>
)
};


이렇게 button에다가 className 연결해줬는데 컴파일에러남;;



props 객체를 못받아옴 ㅠ_ㅠ


const Button = (props: any) => {

return (
<button onClick={onClick} className={props.className}>
{name}
</button>
)
};


ㅇㅈㄹ 해야지 됨 왜이런거??


개발자도구에서 컴포넌트 열어보면


Button 아래에 Button이 있고 거기에 className이 전달됨