typescript 공부 5 theme

https://styled-components.com/docs/api#typescript

//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;
  }
}

theme에 들어갈 속성들의 타입을 지정해주고 export해준다.

 

//src/theme.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',
};

지정한 타입들이 들어있는 DefaultTheme을 import해오고 해당 속성에 값을 입력해준다.

 

//src/index.tsx

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

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

index.tsx에서 적용할 theme을 작성해준다.

 

//src/App.tsx

import styled from 'styled-components';

function App() {
  return (
    <Container>
      <H1>hello</H1>
    </Container>
  );
}

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

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

export default App;

적용된 theme안의 속성을 props로 받아와 사용할 곳에서 사용한다.