Example of styled-component good practice

SuccesBillsInput.jsx

// @flow

import * as React from 'react';
import styled from 'styled-components';


type Props = {
  className: string,
};

type State = {
  className: string,
};

class SuccesBillsInput extends React.Component<Props, State> {

  state = {
    className: '',
  }

  componentDidMount() {
    // для тестов
    window.startAnimate = this.handleStartAnimate;
    window.revertAnimate = this.handleRevertAnimate;
  }

  handleStartAnimate = ():void => {
    this.setState({
      className: 'animate',
    });
  }

  handleRevertAnimate = ():void => {
    this.setState({
      className: '',
    });
  }

  render() {
    const { className } = this.props;
    return (
      <div className={`${className} ${this.state.className}`}>
        <div className="succes-check-container">
          <div className="succes-check" />
        </div>
        <h2 className="succes-greeting">Вы великолепны</h2>
      </div>
    );
  }
}

export default styled(SuccesBillsInput)`
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  background-color: transparent;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background-color 1.2s ${({ theme }) => theme.transitionFunction};
  .succes-check-container {
    transform: rotate(45deg);
    width: 7vh;
    height: 5vh;
    position: relative;
  }
  .succes-check {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 0 solid rgba(255, 255, 255, 0);
    border-right: 0 solid rgba(255, 255, 255, 0);
    transition: width .7s ${({ theme }) => theme.transitionFunction},
                height .5s ${({ theme }) => theme.transitionFunction} .7s;
  }
  .succes-greeting {
    margin-top: 5vh;
    color: rgba(255, 255, 255, 0);
    transition: color 1.2s ${({ theme }) => theme.transitionFunction};
  }
  &.animate {
    width: 100%;
    height: 100%;
    background: white;
    .succes-check {
      width: 7vh;
      height: 5vh;
      border-bottom: 4px solid ${({ theme }) => theme.colors.primary};
      border-right: 4px solid ${({ theme }) => theme.colors.primary};
    }
    .succes-greeting {
      color: ${({ theme }) => theme.colors.text};
    }
  }
`;