styled-components

styled-bootstrap-grid에서 media를 통해서 ${media.sm`css`}이렇게 있을때 내부에서 theme props를 사용할때 typescript에서는 에러가 뜨는데 이것을 해결하는 방법

이렇게 설정이 되어있으면 StyledDiv 컴포넌트를 사용할때 font-size: 12px로 설정된다. 상속받아서 사용해도 상속받는 원본 여기서는 부모컴포넌트의 토큰화된 클래스명이 먼저들어가서 스타일 속성이 제대로 적용이 되지 않는 문제가 생긴다. 검색으로도 풀리지 않아서 어떻게해야 할까 고민이다. 리액트 앱을 재실행하니까 문제가 해결되었다. styled-components가 클래스를 부여하는 과정에서 오류가 생긴 것으로보인다.

styled-components를 사용하면서 ThemeProvider를 사용해서 DarkTheme, LightTheme를 구본해서 사용하고있다. 이런식으로 props 내부의 theme 속성을 가져와서 사용할 수 있다. 그런데 이것을 일반 React 컴포넌트에서 데이터로 사용하고 싶은데 그렇게 하려면 어떻게 해야할까? https://styled-components.com/docs/advanced#getting-the-theme-without-styled-components 위의 styled-components 공식 문서에서보면 HOC에 개념에서 withTheme를 통해서 일반 React 컴포넌트내부에서 theme 속성에 값을 넣어서 사용할 수 있다.