전역 Theme으로 색상 선택해주기

1. 먼저 theme.ts 컴포넌트를 만들자

theme.ts
import { DefaultTheme } from "styled-components";

export const theme: DefaultTheme = {
  bgColor: "#2f3640",
  textColor: "#f5f6fa",
  accentColor: "#44bd32",
};

// 이렇게 각각의 항목을 만들어서 원하는 색상을 넣어주자.

2. 다음 styled.d.ts라는 컴포넌트를 만들고 타입스크립트를 지정해주자

styled.d.ts
import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    accentColor: string;
    bgColor: string;
    textColor: string;
  }
}
어차피 컬러 이름은 string이기 때문에 위와같이 적어주면 된다.

3. 이제 직접 사용을 해보자

import styled from "styled-components";

const Title = styled.h1`
  color: ${(props) => props.theme.accentColor};
`;

export const Coins = () => {
  return <Title>Coins</Title>;
};

// 내가직접 사용하고 싶은 컴포넌트에서 위 props처럼 불러오면 된다.