styled-components의 스타일 상속 문제!

💡 Styled component를 사용하다가, 특정 컴포넌트를 불러와서 위에 스타일을 덧씌우고자 했다. 하지만 스타일은 변하지 않았고 저번에도 같은 경험이 한 번 있었기에 원인을 생각해보았다.

 

문제 발생

import { styled } from "styled-components";

const Container = styled.button`
  background-color: white;
  border: none;
`;

const Button = ({ children, onClick }) => {
  return <Container onClick={onClick}>{children}</Container>;
};

export default Button;

이것은 Button 컴포넌트이다. 배경과 border를 지우기 위해 만들었다. (globalstylesheet로 reset css를 하여도 좋다.)

이후 Button에 width와 height를 주기 위하여 styled(Button)을 하였다.

const NumberButton = styled(Button)`
  width: 40px;
  height: 40px;
`;

그러나 실제 적용이 되지 않았다.

원인

문제는 내가 상속하려는 태그였다. styled는 styled 컴포넌트만 상속할 수 있을 뿐 일반 컴포넌트를 상속하진 않는다. 그렇기에 **styled(Button)**이라는 것 자체가 이미 잘못된 거였다. 

 

결론

스타일을 상속하기 위해서는 오직 "스타일"을 인자로 받아야한다.