Emotion 은 JS로 css 스타일을 작성하도록 설계된 라이브러리다.
Emotion은 프레임워크에 구애받지 않고 사용이 가능하며, React와 함께 사용할 수도 있다.
특히 이 라이브러리를 토스에서 쓰고 있다.
토스 프론트엔드 챕터의 모든 것
토스 프론트엔드 챕터를 소개합니다! 이 문서에는 프론트엔드 챕터에 대해서 궁금하신 분들께서 꼭 알았으면 하는 정보들이 담겨 있습니다.
tosspayments-dev.oopy.io
특히나 css의 props를 이용한 방법을 즐겨 쓴다고 한다.
https://emotion.sh/docs/css-prop
Emotion – The css Prop
The primary way to style elements with emotion is the css prop. It provides a concise and flexible API to style your components. There are 2 ways to get started with the css prop. Both methods result in the same compiled code. After adding the preset or se
emotion.sh
코드
npm i @emotion/react터미널로 npm 설치하고 사용하면 된다.
예시 코드 >
import { css } from '@emotion/react'
const color = 'white'
render(
<div
css={css`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
&:hover {
color: ${color};
}
`}
>
Hover to change color.
</div>
)상단에 import { css } from "@/emotion/react"를 기입해야 라이브러리를 가져올 수 있다.
emotion은 css를 좀 더 쉽고 확장성 높게 만들기 때문에, 여러 기능을 적절히 쓰면 빠르게 스타일링이 가능하다.
참고한 글
https://velog.io/@favorcho/Emotion-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
Emotion 소개 및 사용하기
Emotion 은 JS 로 css 스타일을 작성하도록 설계된 라이브러리다. Emotion은 프레임워크에 구애 받지 않고 사용이 가능하며, React와 함께 사용할 수도 있다. 1. 패키지 소개 @emotion/css 패키지 @emotion/css
velog.io
[React] Emotion 설치 후 간단한 예제 만들어보기
Emotion은 JavaScript로 css 스타일을 작성하도록 설계된 라이브러리입니다.
velog.io
'FE > React' 카테고리의 다른 글
| create react app 지원 중단 (2) | 2025.03.07 |
|---|---|
| 리액트 로딩창 구현 (0) | 2025.02.25 |
| 리액트 zustand란? (0) | 2025.02.21 |
| 리액트 쿼리란? (0) | 2025.02.20 |
| 리액트 Swiper (슬라이더) 적용 (1) | 2025.01.27 |
