Framework Agnostic

가장 기본적인 형태는 이렇다.

npm i @emotion/css

// 프레임워크 없음, 순수 DOM                                                      
import { css } from '@emotion/css';                                               
                                                                                  
const className = css`                                                            
  padding: 32px;                                                                  
  background-color: hotpink;                                                      
  &:hover {                                                                       
    color: white;                                                                 
  }                                                                               
`;                                                                                
                                                                                  
const div = document.createElement('div');                                        
div.className = className;   // 그냥 문자열이니까 어디든 꽂힘                     
div.textContent = 'Hover to change color.';                                       
document.body.appendChild(div);

// React에서 쓴다면
import { css } from '@emotion/css'

const color = 'white'

render(
	<div
		className={css`
			padding: 32px;
			background-color: hotpink;
			&:hover {
				color: ${color};
			}
		`}
	>
		Hover to change color.
	</div>
)

css… 라는 이상한 형태가 있다.

ES6에서 소개된 Tagged Template이라는 건데, 모르겠으면 해당 페이지 참고.

css는 그냥 함수이고, Tagged Template 문법으로 인해 받는 인자는:

strings = ['padding: 32px; &:hover { color: ', '; }'], values = ['white']

둘을 합쳐 css 문자열을 완성한다.

문자열을 해시해서 클래스명을 생성한다.

<style> 태그로 주입

클래스명 문자열을 반환

React 전용