TypeScript - (5) TypeScript & Styled components

Create a declarations file(src/styled.d.ts)

스타일컴포넌트
위 주소로 가면 기본으로 적어줘야할 양식이 있는데, 붙여넣기 후 아래 속성들만 원하는대로 바꾸어준다.

// import original module declarations
import 'styled-components';

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
    btnColor: string;
  }
}

Create a theme.ts file(src/theme.ts)

여기에 theme를 정의를 하고, styled.d.ts안의 속성들은 동일해야 한다.

import { DefaultTheme } from "styled-components";

export const lightTheme:DefaultTheme = {
  bgColor: "white",
  textColor: "black",
  btnColor: "tomato"
}

export const darkTheme:DefaultTheme = {
  bgColor: "black",
  textColor: "white",
  btnColor: "teal"
}

index.tsx가서 테마적용해주기

기존 스타일컴포넌트로 테마를 적용해주는 것과 동일하다.

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import App from './App';
import { lightTheme, darkTheme } from './theme';



ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={lightTheme}>
      <App />
    </ThemeProvider>  
  </React.StrictMode>,
  document.getElementById('root')
);

App.tsx

import styled from "styled-components";


function App() {
  
  const Container = styled.div`
    background-color: ${props => props.theme.bgColor};
  `;

  const H1 = styled.div`
    color: ${props => props.theme.textColor}
  `;

  return (
    <Container>
      <H1>Hello</H1>
    </Container>
  );
}

export default App;