Using ReactCSSTransitionGroup with styled-component

Question

I'm using styled-components instead of tradition way of css. But I don't know how it can work together with ReactCSSTransitionGroup.

Basically, ReactCSSTransitionGroup looks for certain classnames in css resource, then apply to a component throughout its lifecycle. However, with styled-components, there are not any class names, styles are applied to components directly.

I know I can choose not to use ReactCSSTransitionGroup because the two technique doesn't look compatible. But when I use only styled-components, seems I can't render any animation when a component is unmounted - it's pure css, can't access component's lifecycle.

Any help or recommendation is appreciated.

Answer 1

I didn't want to use injectGlobal as suggested in another answer because I needed to make the transitions different per component.

It turns out to be pretty easy - just nest the transition classes in the styling for the component:

import React from "react"; import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; import styled from 'styled-components';  const appearDuration = 500; const transitionName = `example`;  const Container = styled.section`         font-size: 1.5em;         padding: 0;         margin: 0;          &.${transitionName}-appear {             opacity: 0.01;         }          &.${transitionName}-appear-active {             opacity: 1;             transition: opacity ${appearDuration}ms ease-out;         }`;  export default () => {      return (         <CSSTransitionGroup             transitionName={transitionName}             transitionAppear={true}             transitionAppearTimeout={appearDuration}>             <Container>                 This will have the appear transition applied!             </Container>         </CSSTransitionGroup>     ); }; 

Note that I'm using the newer CSSTransitionGroup, rather than ReactCSSTransitionGroup, but it should work for that too.