Emotion Theme 적용하기

사전 과제를 Emotion으로 진행하다 Figma에 정의된 Element들이 있어서 Theme을 사용하기로 했다.

 

1. Theme 정의하기

// theme.ts

const palette = {
  primary: "#4880EE",
  secondary: "#F2F4F6",
};

const typography = {
  title1: {
    fontFamily: "Noto Sans KR",
    fontStyle: "normal",
    fontWeight: 700,
    fontSize: "24px",
    lineHeight: "24px",
  },
  title2: {},
  title3: {},
  body1: {},
  body2: {},
  "body2-bold": {},
  caption: {},
  small: {},
};

export const theme = {
  palette,
  typography,
};

 

2. Theme 타입 정의하기

// types/emotion.d.ts

import "@emotion/react";

type palette = "primary" | "secondary";
type typography =
  | "title1"
  | "title2"
  | "title3"
  | "body1"
  | "body2"
  | "body2-bold"
  | "caption"
  | "small";

declare module "@emotion/react" {
  export interface Theme {
    palette: {
      [key in palette]: string;
    };
    typography: {
      [key in typography]: {
        fontFamily: string;
        fontStyle: string;
        fontWeight: number;
        fontSize: string;
        lineHeight: string;
      };
    };
  }
}

 

3. ThemeProvider 제공하기

...
import type { AppProps } from "next/app";
import { ThemeProvider } from "@emotion/react";
import { theme } from "@/styles/theme";

export default function App({ Component, pageProps }: AppProps) {
  return (
      ...
        <ThemeProvider theme={theme}>
          <Component {...pageProps} />
        </ThemeProvider>
      ...
  );
}

 

4. Theme 사용하기

// styled

const Title = styled.span(({ theme }) => ({
  ...theme.typography.title3,
  ...
}));

// css

export default function Button({
  children,
  className,
  onClick,
}: ButtonProps) {
  return (
    <button
      onClick={onClick}
      css={(theme) => ({
        backgroundColor: theme.palette[color],
        ...
        })
      className={className} // 여기에 className은 해당 컴포넌트를 사용하는 곳에서 css={css``} 로 넘겨주면 변환된다.
    >{children}</button>
   )
};