[TIL]styled-コンポーネントの共通スタイルプロパティをtypescriptに設定

styled-conentsが提供するThemeProviderでは、一般的なcssを変数に設定できます.この機能はjavascriptを使用する既存のプロジェクトで何回か使用されていますが、タイプスクリプトで初めて使用されると混同されます.だから私のような人に役に立つように、この文章を書きます.
タイプスクリプトは、トピックファイルを作成する前にtypeを宣言する必要があります.theme.スタイルはtsと同じフォルダに設定されます.d.tsというファイルを作成します.
1. styled.d.ts

import "styled-components";
import { ColorsTypes, FontSizeTypes } from "./theme";

declare module "styled-components" {
  export interface DefaultTheme {
    colors: ColorsTypes;
    fontSize: FontSizeTypes;
  }
}

終わりだ!簡単です.よく使う色とフォントサイズだけを変数に設定します.
最初はよくわかりませんが、次のように各変数をハードコーディングしました.

colors: {
      header: string;
      primary: string;
      white: string;
      black: string;
      };

これは野蛮すぎる.前に書いたようにするだけで、簡単でメンテナンスしやすいです.
とにかくタイプ宣言でテーマが終わったtsでよく使われるcssを宣言します.
2. theme.ts

import { DefaultTheme } from "styled-components";

const colors = {
  header: "#1565C0",
  primary: "#2196F3",
  white: "#ffffff",
  black: "#000000",
  buttonOrange: "#FFA000",
  dateText: "#939FA5",
  border: "#E5E5E5",
  toggleOn: "#2196F3",
  toggleOff: "#F5F5F5",
};

const fontSize = {
  title: 20,
  subTitle: 16,
  text: 14,
};

export type ColorsTypes = typeof colors;
export type FontSizeTypes = typeof fontSize;

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

export default theme;

このようにテーマをTSファイルを作成した場合は、アプリケーションでThemeProviderで包むだけで済みます.
3. App.ts

import React from "react";
import GlobalStyles from "styles/GlobalStyles";
import { ThemeProvider } from "styled-components";
import { theme } from "styles/theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <GlobalStyles />
      </div>
    </ThemeProvider>
  );
}

これにより、任意の構成部品から使用できるグローバルスタイルが作成されます.