[NextJs] emotion Theme 적용하기

nextjs emotion세팅

https://emotion.sh/docs/install
https://emotion.sh/docs/css-prop

npm install --save @emotion/react
npm install --save @emotion/styled
npm install --save-dev @emotion/babel-plugin

이모션 설치 후 테마 적용하기

1.emotion.d.ts 주어진 테마에 맞춘 타입 추가해주기
2. theme.ts 상세한 타입 값 지정
3. global.ts 글로벌 타입 지정
4. _app.tsx 테마프로바이더 씌워주기

1. emotion.d.ts

import '@emotion/react';

declare module '@emotion/react' {
  export interface Theme {
    color: {
      primary: string;
      'primary-dark': string;
      'primary-light': string;
    };

2 theme.ts

import { Theme } from '@emotion/react';

const color = {
  primary: '#FFC600',
  'primary-light': '#fdf4da',
  'primary-dark': '#b39e00',
};

const theme: Theme = {
  color: {
    primary: color.primary,
    'primary-light': color['primary-light'],
    'primary-dark': color['primary-dark'],
  },
};

export default theme;

3. global.ts

import { css } from '@emotion/react';

const global = css`
 ...,

  * {
    box-sizing: border-box;
  }
`;

export default global;

4. src/pages/_app.tsx

  return (
        <ThemeProvider theme={theme}>
           <Global styles={global} /> 
          ...,
      </ThemeProvider>
   );
}

---

사용법

아래와 같이 props로 사용할 수 있다

export const ListTitle = styled.h1`
  font-size: ${props => props.theme['font-2xl']};
  font-weight: ${props => props.theme['font-bold']};
`;