How to use the react-emotion.css function in react-emotion

function count(n = 4, start = 1) { // eslint-disable-line consistent-return
  const list = range(start, n).map(i => `
      &:nth-child(${i}) {
        animation-delay: ${delay(0.2, n, i - 1)}s;
      }
  `);
  return css(list.join('\n'));
}

function count(n = 4, start = 1) { // eslint-disable-line consistent-return
  const list = range(start, n).map(i => `
      &:nth-child(${i}) {
        animation: ${pulseSync} 0.6s ${delay(0.07, n, i)}s infinite ease-in-out;
      }
  `);
  return css(list.join('\n'));
}

function count(n = 6, start = 1) { // eslint-disable-line consistent-return
  const list = range(start, n).map(i => `
      &:nth-child(${i}) {
        animation: ${lineScale} 1s ${delay(0.1, n, i)}s infinite cubic-bezier(.2,.68,.18,1.08);
      }
  `);
  return css(list.join('\n'));
}

const styles = (color, backgroundColor) =>
	css(
		backgroundColor && {
			backgroundColor,
			'&:hover, &:focus': {
				backgroundColor: shade(backgroundColor, -0.1),
				color,
			},
		},
		color && {
			color,
		},
		{
			whiteSpace: 'nowrap',
		},
	);

const styles = (color, backgroundColor) =>
	css(
		backgroundColor && {
			backgroundColor,
			'&:hover, &:focus': {
				backgroundColor: shade(backgroundColor, -0.1),
				color,
			},
		},
		color && {
			color,
		},
		{
			whiteSpace: 'nowrap',
		},
	);

React__default.createElement(ColorStop, {
            color: colorOne,
            value: colorStopOne,
            onChangeColor: this.updateColorOne,
            onChangeStop: this.updateStopOne
          }),
          React__default.createElement(ColorStop, {
            color: colorTwo,
            value: colorStopTwo,
            onChangeColor: this.updateColorTwo,
            onChangeStop: this.updateStopTwo
          }),
          React__default.createElement(
            'div',
            {
              className: styled.css(_templateObject3$1)
            },
            React__default.createElement(BasicTools.Clipboard, {
              id: 'gradient-clipboard',
              showMsg: showMsg,
              copyColor: this.copyColor
            }),
            React__default.createElement(
              'div',
              { style: { marginLeft: 10 } },
              React__default.createElement(BasicTools.GradientGenerator, {
                generateGradient: this.generateGradient
              })
            )
          )
        )
      )

Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth kitsch next
      level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris sustainable.
      Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw denim, thundercats
      salvia intelligentsia jean shorts officia. Heirloom craft beer put a bird on it occaecat
    <p></p>
    <hr>

    <h3 style="{hierarchy.h3}">Variants</h3>

    <span>Button Text</span>
    <br>
    <span>Caps Text</span>
    <br>
    <label>Label Text</label>
    <br>
    <span>Hint Text</span>
    <br>
    <span>Error Text</span>
    <br>
    <a href="#">
      Link Text
    </a>
    <br>
    <span>
      Inverse Text
    </span>
    <br>
    <span>Mono Text</span>
  
);

level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris sustainable.
      Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw denim, thundercats
      salvia intelligentsia jean shorts officia. Heirloom craft beer put a bird on it occaecat
    <p></p>
    <p style="{hierarchy.small}">
      <strong>Small: </strong> Tacos chartreuse raclette single-origin coffee ethical tilde ennui.
      Magna asymmetrical church-key farm-to-table dreamcatcher nisi iceland photo booth kitsch next
      level pop-up banh mi quinoa exercitation hella. Raw denim organic enim laboris sustainable.
      Polaroid occupy typewriter distillery. Kinfolk nisi man braid try-hard raw denim, thundercats
      salvia intelligentsia jean shorts officia. Heirloom craft beer put a bird on it occaecat
    </p>
    <hr>

    <h3 style="{hierarchy.h3}">Variants</h3>

    <span>Button Text</span>
    <br>
    <span>Caps Text</span>
    <br>
    <label>Label Text</label>
    <br>
    <span>Hint Text</span>
    <br>
    <span>Error Text</span>
    <br>
    <a href="#">
      Link Text
    </a>
    <br>
    <span>
      Inverse Text
    </span>

<p></p>
    <hr>

    <h3 style="{hierarchy.h3}">Variants</h3>

    <span>Button Text</span>
    <br>
    <span>Caps Text</span>
    <br>
    <label>Label Text</label>
    <br>
    <span>Hint Text</span>
    <br>
    <span>Error Text</span>
    <br>
    <a href="#">
      Link Text
    </a>
    <br>
    <span>
      Inverse Text
    </span>
    <br>
    <span>Mono Text</span>
  
);

<br>
    <label>Label Text</label>
    <br>
    <span>Hint Text</span>
    <br>
    <span>Error Text</span>
    <br>
    <a href="#">
      Link Text
    </a>
    <br>
    <span>
      Inverse Text
    </span>
    <br>
    <span>Mono Text</span>
  
);