styled 컴포넌트 내부에서 가져오는 props를 일반 React 컴포넌트에서 어떻게 가져오나?

🤔 무엇을

styled-components를 사용하면서 ThemeProvider를 사용해서 DarkTheme, LightTheme를 구본해서 사용하고있다.

const dumy = styled.div`
  color: ${({theme}) => theme.color};
`;Code language: JavaScript (javascript)

이런식으로 props 내부의 theme 속성을 가져와서 사용할 수 있다. 그런데 이것을 일반 React 컴포넌트에서 데이터로 사용하고 싶은데 그렇게 하려면 어떻게 해야할까?

🔑 해결

https://styled-components.com/docs/advanced#getting-the-theme-without-styled-components

위의 styled-components 공식 문서에서보면 HOC에 개념에서 withTheme를 통해서 일반 React 컴포넌트내부에서 theme 속성에 값을 넣어서 사용할 수 있다.

import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

const MyComponent = () => {
  const themeContext = useContext(ThemeContext);

  console.log('Current theme: ', themeContext);
  // ...
}Code language: JavaScript (javascript)