React + TS + Style-Components

• 포스팅 주 내용은 전역 스타일(Global), 테마(theme), 타입스크립트 적용에 포커스를 맞추겠습니다.
• react 를 사용해본적이 있거나, 스타일 컴포넌트를 사용해보신 적이 있으신 분들은
• 아래 코드 순서만 보고 충분히 감을 잡으실 수 있을 거라고 생각 합니다.

---

✔ 환경 세팅

// 스타일 컴포넌트 설치
yarn add styled-components

// 타입스크립트 적용
yarn add --dev @types/styled-components

---

✔ styled.d.ts

import 'styled-components';

declare module 'styled-components' {
    export interface DefaultTheme {
        TitleFont : {
            fontSize : any;
            fontFamily : string;
            fontColor : string;
            fontWeight : string;
        }

        LoginButton : {
            bgColor : any;
        }
    }
}

• .d.ts를 타입 선언 파일이라고 합니다. TS코드의 타입 추론을 돕는 파일 입니다.
• 첫번째 단계는 styled.d.ts 라는 테마에 사용될 변수들의 타입들을 선언하는 파일을 만드는 것 입니다.
• 위에서 만든 선언파일로 styled-components 모듈에 DefaultTheme 라는 이름의 인터페이스를 생성해 타입을 명시.
• 테마를 작성할 때 import하여 테마안에 선언된 타입에 맞게 스타일을 작성.

---

✔ theme.tsx

import { DefaultTheme } from "styled-components";

export const SignTheme : DefaultTheme = {
    TitleFont : {
        fontSize : '32px',
        fontColor : 'lightgray',
        fontFamily : 'Nanum Myeongjo',
        fontWeight : 'bold'
    },
    LoginButton : {
        bgColor : 'rgb(237, 82, 85)'
    }

}

---

✔ index.tsx

• 굳이 index.tsx 아니어도 상관 없습니다. ( 연습한 파일들 기준 )

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { GlobalStyle } from './style/GlobalStyle';
import { ThemeProvider } from 'styled-components';
import { SignTheme } from './style/theme';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement 
);
root.render(
  <React.StrictMode>
    <GlobalStyle/>
      <ThemeProvider theme={SignTheme}>
        <App />
      </ThemeProvider>
  </React.StrictMode>
);

---

 

예시 코드와 같이 props 불러와서 사용

import styled from "styled-components";
import { SignTheme } from "../style/theme";


const MainWrap = styled.div`
    width : 100%;
    padding : 0px 16px;
    display : flex;
    justify-content : center;
`

const TitleText = styled.span`
    display: inline-block;
    margin-top : 200px;
    text-transform : uppercase;
    font-family : ${(props) => props.theme.TitleFont.fontFamily};
    font-size : ${(props) => props.theme.TitleFont.fontSize};
    font-weight : ${(props) => props.theme.TitleFont.fontWeight};
    text-shadow: 0 14px 12px #5e728c;
`

const Title = () => {
    return (
        <MainWrap>
            <TitleText>jjcl company</TitleText>
        </MainWrap>
    )
}

export default Title;

---

 

✔ Global Style

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
    *{
        box-sizing : border-box;
    }

    body{
        width : auto;
        height : 100%;
        padding : 0px;
        margin : auto;
        background : #DBDBDB;

        @media (min-width: 701px){
            max-width: 700px;
        };

        > div {
            background: #fff
        }
    }

    input {
        outline : 0;
        padding : 0px 12px;
    }

    input:focus {
        border-bottom : 1px solid rgb(237, 82, 85);
    }

    button {
        background-color : inherit;
        border : 0;
    }
`

• 전역적으로 사용하는 스타일을 관리 합니다.
• 컴포넌트 형식으로 사용할 수 있습니다.
• box-sizing 과 같은 baseCSS 규칙을 지정할 때 사용