Using ReactCSSTransitionGroup with styled-component

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.