[React] StyledComponents와 Emotion을 비교해보기 (2) - css

위 글을 참고 했음…

1. 패키지 설치

$ npm install @emotion/react @emotion/core @emotion/styled emotion-reset

2. 전역 스타일로 적용할 GlobalStyle 생성 (초기화 포함)

/src/style 경로에 globalStyle.tsx 파일을 생성

import { css, Global } from '@emotion/react';
import reset from 'emotion-reset';

const GlobalStyle = () => {
  return (
    <Global
      styles={css`
        ${reset}

        *, *::before, *::after {
          box-sizing: border-box;
        }

        * {
          font-family: 'Spoqa Han Sans Neo', 'sans-serif' !important;
        }

        button,
        input,
        select,
        textarea {
          background-color: transparent;
          border: 0;
          //  &는 이면서 Sass 문법
          &:focus {
            outline: none;
            box-shadow: none;
          }
        }

        a,
        button {
          cursor: pointer;
        }

        button {
          padding: 0;
        }

        .visually-hidden {
          position: absolute !important;
          width: 1px !important;
          height: 1px !important;
          padding: 0 !important;
          margin: -1px !important;
          overflow: hidden !important;
          clip: rect(0, 0, 0, 0) !important;
          white-space: nowrap !important;
          border: 0 !important;
        }
      `}
    />
  );
};

export default GlobalStyle;

emotion-reset으로 기본 초기화 해주고 추가로 더 초기화 해줄 CSS 코드를 넣는다.

나는 추가로 visually-hidden이라는 클래스명을 추가해줘서 의미만 부여하고 나타내지 않을 UI에대해 적용할 예정

3. 스타일관련 변수들을 최상단에 선언 theme.ts 생성

스타일에 대한 변수명 예를들어 color, typography, padding,을 선언해 놓고 theme으로 import해서 관리

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

const theme: Theme = {
  mainGreen: '#00D4AA',
};

export default theme;

일단은 test 용으로 색깔만 선언함.

<aside> ⚙ 또한 theme 타입을 정의해주기 위해 /src/@types 경로에 import-emotion.d.ts 파일을 생성한 뒤 다음과 같이 작성해보겠습니다.

</aside>