emotion theme 타입 지정하는 방법

생성일

Dec 3, 2021 06:46 AM

기록자

해결 여부

속성

카테고리

문제 상황

아래와 같이 프로젝트 내에서 공통으로 사용하는 스타일 값을 theme으로 만들어두고 emotion의 ThemeProvider를 이용해서 import 없이 스타일 값을 사용하도록 설정하려고 한다.

theme.ts:


export default {
  colors: {
    primary: "#ffb266",
    fontColor: "#4d5256",
    disabled: "#c0c0c0",
    black: "#000",
    white: "#fff",
  },
}

App.tsx:


import { ThemeProvider } from "@emotion/react";
import styled from "@emotion/styled";
import GlobalTheme from "./assets/theme";

const Wrapper = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${({ theme }) => theme.colors.primary};
`;

const App = () => {
  return (
    <ThemeProvider theme={GlobalTheme}>
      <Wrapper>
        <App />
      </Wrapper>
    </ThemeProvider>
  );
};

export default App;

해결 방법

types/emotion.d.ts:


import "@emotion/react";

import { ITheme } from "../assets/theme";

declare module "@emotion/react" {
  export interface Theme extends ITheme {}
}

emotion theme 타입 지정하는 방법

문제 상황

해결 방법

See also