[React] styled-components theme

React와 같이 사용하는 css 라이브러리로 styled-components를 자주 사용한다. 

그런데, 공통 스타일을 관리하려고 theme를 만들면 필요할 때마다 import를 해야한다는 불편함이 있었다. 

 

또한 dark 테마와 같이 전체적인 스타일이 변경되야 하는 경우 처리하기가 매우 까다로웠다. 

하지만 styled-components에서는 context API를 통해 theme를 관리할 수 있는데, ThemeProvider이다. 

 

ThemeProvider 

ThemeProvider는 context를 통해서 하위 컴포넌트에서 theme 속성을 전달하는 역할을 한다. 

그래서 일관적인 theme를 유지할 수 있다. 

import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    red : red;
    white: "#ffffff"
    
    // ...
  }
}

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Header />
      <Main />
      <Footer />
    </ThemeProvider>
  )
}

theme를 지정해서 ThemeProvider에게 넘겨주면 자식 컴포넌트는 해당 theme를 사용할 수 있게 된다.

 

import styled from 'styled-components';

const Container = styled.div`
  background: ${props => props.theme.colors.white};
`

const Main = () => {
  return (
    <Container>Main</Container>
  )
}

해당 테마를 가지고 오기 위해서 간단하게 props에서 theme를 불러오면 된다. 

 

또한 앞서 말한 Dark 테마 등을 구현하기 위해서도 

// ...

const theme = {
  colors: {
    red : red;
    white: "#ffffff"
    
    // ...
  }
}

const dark = {
  colors: {
    red: blue;
    white: "#000000"
  }
}

const App = () => {
  const [isDark, setIsDark] = useState(false)

  return (
    <ThemeProvider theme={isDark ? dark : theme}>
      <Header />
      <Main />
      <Footer />
    </ThemeProvider>
  )
}

다음과 같이 theme에 들어갈 값을 바꿔주면 간단하게 구현이 가능하다.