[React] ThemeProvider 사용하기

 

 

 

---

 

 

◽ ThemeProvider를 사용하는 이유

자주 사용하는 css를 변수로 설정할 수 있다.

 

 

 

📄 styled.d.ts

import { ColorTypes, FontSizeTypes } from './theme'
import 'styled-component'

// d.ts
// - 구현부가 아닌 선언부만을 작성하는 용도의 파일로 js 코드로 컴파일 되지 않는다.
declare module 'styled-components' {
  export interface DefaultTheme {
    colors: ColorTypes
    fontSize: FontSizeTypes
  }
}

 

 

 

📄 index.tsx

import App from './App'
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './store/store'
import GlobalStyles from './GlobalStyles'
import { ThemeProvider } from 'styled-components'
import { theme } from './assets/scss/theme'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ThemeProvider>
  </Provider>,
)

 

 

 

📄 theme.ts

import { DefaultTheme } from 'styled-components'

const colors = {
  primaryColor: '#ffc92e',
  secondaryColor: '#ffdddd',
}

const fontSize = {
  xxl: '22px',
  xl: '20px',
  l: '18px',
  m: '16px',
  xs: '15px',
  xxs: '14px',
}

export type ColorTypes = typeof colors
export type FontSizeTypes = typeof fontSize

export const theme: DefaultTheme = {
  colors,
  fontSize,
}

 

 

📄 컴포넌트 안에서 사용하기

.rank_tag {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  color: #fff;
  font-weight: 700;
  font-size: ${(props) => props.theme.fontSize.m};
  line-height: 27px;
  text-align: center;
  background-color: ${(props) => props.theme.colors.primaryColor};
  border-radius: 4px;
}

 

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.