본문 바로가기

Web.d

[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

styled is a way to create React components that have styles attached to them. It’s available from @emotion/styled. styled was heavily inspired by styled-components and glamorous Styling elements and components styled is very similar to css except you cal

emotion.sh


4. Global styled

 

Emotion - Global Styles

Sometimes you might want to insert global css like resets or font faces. You can use the Global component to do this. It accepts a styles prop which accepts the same values as the css prop except it inserts styles globally. Global styles are also removed w

emotion.sh

 

// 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 글로벌 공통 스타일 적용하기

먼저 글로벌로 적용하려는 스타일을 작성한다.

dohaelee.github.io


5. SSR

 

Emotion - Server Side Rendering

Server side rendering in Emotion 10 has two approaches, each with their own trade-offs. The default approach works with streaming and requires no additional configuration, but does not work with nth child or similar selectors. It’s strongly recommended t

emotion.sh


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

안녕하세요. J4J입니다. 이번 포스팅은 StyledComponents와 Emotion을 비교해보는 시간에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 styled를 이용한 비교를 원하시는 분들은 다음 링크

jforj.tistory.com

 


7. Tooling / Packages

 

Emotion - Babel Plugin

@emotion/babel-plugin is highly recommended. All of the options that can be provided to @emotion/babel-plugin are documented in @emotion/babel-plugin’s README. Install In emotion version 8 and above, installation is optional. In older versions, installat

emotion.sh

 

 

Emotion - @emotion/react

Simple styling in React. Install Usage import { jsx, css, Global, ClassNames } from '@emotion/react' render( {({ css, cx }) => ( )} ) More documentation is available at https://emotion.sh.

emotion.sh

 

반응형