Styled-components(2) global 스타일 세팅하기

 

 

styled-components 를 사용하여 css 를 컴포넌트화 하여 배경색을 변경하는 실습을 해보자.

---

Styled-components(2) global 스타일 세팅하기

 

src/typings/theme.d.ts

global에 원하는 css 를 작성하기 전에, type을 선언하자.

import 'styled-components'
import { theme } from '../styles'

type Theme = typeof theme

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

 

src/styles/theme.ts

그리고 theme 이라는 css 컴포넌트를 만들어주자. 나중에 여기서 필요한 속성을 꺼내 사용할 거다.

export default {
  colors: {
    background: 'radial-gradient(#282c34cc, #282c34)',
    black: '#282c34',
    blue: '#a0e9fd',
    lightBlue: '#caf3fe',
    white: 'white',
  },
  transition: '0.3s',
}

 

src/styles/global.ts

위에서 선언해준 theme 안에서 원하는 속성들을 골라골라 넣어준다.

import { createGlobalStyle, css } from 'styled-components' // 글로벌스타일을 정의해주자

export default createGlobalStyle` // 다른 컴포넌트에서도 공통으로 사용하도록 export 해주자
${({ theme }) => css`
  html {
    height: 100%;

    body {
      display: flex;
      flex-direction: column;
      height: 100%;
      margin: 0;

      #root {
        background: ${theme.colors.background};	// theme 안에 color 중에서 background 를 선택
        color: ${theme.colors.black};
        display: flex;
        font-family: sans-serif;
        height: 100%;
        justify-content: center;
        padding: 15px;
      }
    }
  }
`}
`

 

src/styles/index.ts

스타일 컴포넌트들을 인덱스 안에 선언해서 모아놓고 실제 컴포넌트에서 편하게 불러올 수 있도록 하자.

export { default as GlobalStyles } from './global'
export { default as theme } from './theme'

 

src/index.tsx

마지막으로 HTML에 적용이 어떻게 되는지 구조를 보자

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from 'styled-components' // 커스텀한 css컴포넌트 임포트해오기
import { GlobalStyles, theme } from './styles'    // index.ts에서 css컴포넌트 임포트해오기
import { unregister } from './core'

ReactDOM.render(
  <ThemeProvider theme={theme}>		// ThemeProvider 안에 theme이라는 스타일 함께 적용
    <GlobalStyles />			// 위에서 정의한 Global 스타일 적용
    <div>Hello World</div>
  </ThemeProvider>,
  document.getElementById('root')
)

unregister()

 

 

결과 화면

styled-components 로 동적으로 컬러를 바꾸었더니 잘 적용되었다.

(배경 그라데이션과 Hello World 또한 잘 뜬다.)