Variants
ev()는 스타일 정의 객체 하나를 받아요. 이 페이지에서는 base와 variants를 살펴봐요. defaultVariants, compoundVariants, slots는 각자의 페이지에서 다뤄요.
ev({
base, // 모든 variant에 공통으로 적용되는 스타일
variants, // 축 × 값 → 스타일
compoundVariants, // 여러 축이 동시에 일치할 때 적용되는 스타일
defaultVariants, // prop을 생략했을 때 쓸 기본값
});base
base 스타일은 variant 함수를 호출할 때마다 늘 적용돼요. variant에 영향받지 않는 속성을 여기에 넣어 주세요.
const button = ev({
base: {
padding: '10px 20px',
borderRadius: '8px',
border: 'none',
cursor: 'pointer',
},
});
button(); // base 스타일만 적용돼요base는 CSSObject 하나를 받고, Emotion의 모든 문법(중첩 셀렉터, pseudo-class, 미디어 쿼리, @keyframes 등)을 지원해요.
const button = ev({
base: {
transition: 'transform 0.2s ease',
'&:hover': {
transform: 'translateY(-2px)',
},
'&:disabled': {
opacity: 0.6,
cursor: 'not-allowed',
},
},
});variants
variants는 축(axis)별 스타일 객체예요. 각 축은 값에서 CSSObject로 매핑돼요.
const button = ev({
base: {
border: '1px solid transparent',
borderRadius: 8,
cursor: 'pointer',
fontWeight: 600,
transition: 'all 0.2s ease',
},
variants: {
variant: {
filled: {
background: 'var(--button-color)',
color: 'white',
},
outlined: {
background: 'transparent',
borderColor: 'var(--button-color)',
color: 'var(--button-color)',
},
text: {
background: 'transparent',
color: 'var(--button-color)',
},
},
size: {
small: {
padding: '8px 16px',
fontSize: 12,
},
medium: {
padding: '10px 20px',
fontSize: 14,
},
large: {
padding: '12px 24px',
fontSize: 16,
},
},
color: {
primary: {
'--button-color': '#d36ac2',
},
secondary: {
'--button-color': '#475569',
},
},
},
});
<button
css={button({
variant: 'filled',
size: 'medium',
color: 'primary',
})}
>
Filled
</button>
<button
css={button({
variant: 'outlined',
size: 'medium',
color: 'primary',
})}
>
Outlined
</button>
<button
css={button({
variant: 'text',
size: 'medium',
color: 'primary',
})}
>
Text
</button>variant 값으로는 string, number, Boolean 세 종류를 쓸 수 있어요.
const panel = ev({
variants: {
color: {
red: {
color: 'red',
},
blue: {
color: 'blue',
},
},
level: {
1: {
zIndex: 1,
},
2: {
zIndex: 2,
},
},
outlined: {
true: {
border: '1px solid',
},
false: {
border: 'none',
},
},
},
});
panel({ color: 'red', level: 2, outlined: true });Boolean variant는 스타일 정의에선 'true' / 'false' 문자열 키로 적지만, 함수를 호출할 때는 실제 Boolean 값(true / false)을 그대로 넘겨요.
스타일 적용 순서
한 번 호출할 때마다 스타일은 이 순서로 쌓여요 (CSS가 충돌하면 뒤에 오는 게 이겨요).
base- 일치하는 단순
variants항목 (선언된 키 순서대로) - 일치하는
compoundVariants항목 (배열 순서대로)
GitHub에서 이 페이지 편집
마지막 업데이트