<div id="readability-page-1" class="page"><div><p><code>CssTransition</code>의 props인 <code>classNames</code>에는 각 transition stage(appear, enter, and exit)별로 적용시킬 스타일의 <strong>class나 id를</strong> 넘겨주어야 한다.<br>
emotion과 함께 사용하기 위해선, emotion css 가 최종적으로 생성하는 class명이 필요하다.</p>
<p>그러나, emotion css가 제공하는 css method는 return type이 string이 아닌 SerializedStyled이다.</p>
<p>ClassName 컴포넌트를 활용하면 emotion css가 생성하는 클래스이름을 얻을 수 있다.</p>
</div></div>

ginameee.log

Jangchun Lee

CssTransition의 props인 classNames에는 각 transition stage(appear, enter, and exit)별로 적용시킬 스타일의 class나 id를 넘겨주어야 한다.
emotion과 함께 사용하기 위해선, emotion css 가 최종적으로 생성하는 class명이 필요하다.
그러나, emotion css가 제공하는 css method는 return type이 string이 아닌 SerializedStyled이다.
ClassName 컴포넌트를 활용하면 emotion css가 생성하는 클래스이름을 얻을 수 있다.
!codesandbox[10n4zlq434?fontsize=14&hidenavigation=1&theme=dark]

CSSTransition with emotion

댓글