상속받은 컴포넌트에서 스타일코드 우선순위?

🤔 무엇을

const ParentDiv = styled.div`
  font-size: 12px;
`;

const StyledDiv = styled(ParentDiv)`
  font-size: 14px;
`;Code language: JavaScript (javascript)

이렇게 설정이 되어있으면 StyledDiv 컴포넌트를 사용할때 font-size: 12px로 설정된다. 상속받아서 사용해도 상속받는 원본 여기서는 부모컴포넌트의 토큰화된 클래스명이 먼저들어가서 스타일 속성이 제대로 적용이 되지 않는 문제가 생긴다.

검색으로도 풀리지 않아서 어떻게해야 할까 고민이다.

🔑 해결

리액트 앱을 재실행하니까 문제가 해결되었다. styled-components가 클래스를 부여하는 과정에서 오류가 생긴 것으로보인다.