Styled Components

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import styled, { keyframes } from 'styled-components';


const AppContainer = styled('div')`
  text-align: center;

  .app-header {
    background-color: ${props => props.color};
    height: 150px;
    padding: 20px;
    color: white;
  }

  .app-logo {
    height: 80px;
    animation: ${keyframes`
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    `} infinite 20s linear;
  }

  .app-intro {
    font-size: large;
  }
`;


class App extends Component {

  static defaultProps = {
    color: '#222'
  };

  render() {
    return (
      <AppContainer color={this.props.color}>
        <div className="app-header">
          <img className="app-logo" src={logo} alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="app-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </AppContainer>
    );
  }
}

export default App;

/*
  Generates:
  <style type="text/css">
  @keyframes iVXCSc {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .hoTfqm { 
    text-align: center;
  }
  .hoTfqm .app-header { 
    background-color: #222; 
    height: 150px; 
    padding: 20px; 
    color: white;
  }
  .hoTfqm .app-logo { 
    height: 80px; 
    animation: iVXCSc infinite 20s linear; 
    -webkit-animation: iVXCSc infinite 20s linear;
  }
  .hoTfqm .app-intro { 
    font-size: large;
  }
  </style>
*/



/* **************************************************************** */



import React, { Component } from 'react';
import logo from './logo.svg';
import styled, { keyframes } from 'styled-components';


const AppContainer = styled.div`
  text-align: center;
`;

const AppHeader = styled.div`
  background-color: ${props => props.color};
  height: 150px;
  padding: 20px;
  color: white;
`;

const AppLogo = styled.img`
  height: 80px;
  animation: ${keyframes`
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  `} infinite 20s linear;
`;

const AppIntro = styled.p`
  font-size: large;
`;


class App extends Component {

  static defaultProps = {
    color: '#222'
  };

  render() {
    return (
      <AppContainer>
        <AppHeader color={this.props.color}>
          <AppLogo src={logo} alt="logo" />
          <h2>Welcome to React</h2>
        </AppHeader>
        <AppIntro>
          To get started, edit <code>src/App.js</code> and save to reload.
        </AppIntro>
      </AppContainer>
    );
  }
}

export default App;

/*
  Generates:
  <style type="text/css">
  .jBvxsI { 
    text-align: center;
  }
  .eBOorU { 
    background-color: #222;
    height: 150px;
    padding: 20px;
    color: white;
  }
  @keyframes iVXCSc {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    
  }
  .ksibDt { 
    height: 80px;
    animation: iVXCSc infinite 20s linear;
    -webkit-animation: iVXCSc infinite 20s linear;
  }
  .etOaTz { 
    font-size: large;
  }
  </style>
*/