[NextJS][Typescript] @emotion 세팅하기 (설치부터 Theme까지)

1. introduction
2. install
3. styled-components 문법
4. Global styled
5. SSR
6. Theming
7. Tooling / Packages

---

1. introduction

 

yarn add @emotion/styled @emotion/react

 

• css prop 지원
• SSR에서 따로 설정을 필요로 하지 않는다
• Theme 사용 가능
• ESLint plugin 설정이 되어 있다
• @emotion/styled 는 styled.div 스타일을 사용할 수 있게 한다

---

2. install

 

yarn add --dev @emotion/babel-plugin

 

• optimizes styles by compressing and hoisting 하여 더 좋은 개발자 경험을 선사한다

 

// .babelrc
 
{
  "env": {
    "production": {
      "plugins": ["@emotion", ...otherBabelPlugins]
    }
  },
  "plugins": ["@emotion"]
}

---

3. styled-components 문법

Emotion - Styled Components

---

4. Global styled

Emotion - Global Styles

 

// global.ts
 
import { css } from "@emotion/react";
 
export const global = css``;

 

// _app.tsx
 
import { Global } from "@emotion/react";
import type { AppProps } from "next/app";
 
import global from "../global";
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global styles={global} />
      <Component {...pageProps} />
    </>
  );
}
 
export default MyApp;

 

 

React Emotion 글로벌 공통 스타일 적용하기

---

5. SSR

Emotion - Server Side Rendering

---

6. Theming

 

// theme.ts
 
import { Theme } from "@emotion/react";
 
const theme: Theme = {
  colors,
  fonts,
};
 
export default theme;

 

// _app.tsx
 
import { ThemeProvider } from "@emotion/react";
import type { AppProps } from "next/app";
 
import theme from "../theme";
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
 
export default MyApp;

 

여기서 그치면 안 되고, TS와의 호환성을 위해 tsconfig.json에 import 설정을 추가해야 한다

 

// tsconfig.json
 
{
  ...
  "jsxImportSource": "@emotion/react",
  ...
}

 

 

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

 

---

7. Tooling / Packages

Emotion - Babel Plugin

 

Emotion - @emotion/react