React 进阶提高免费视频教程 #26 如何使用 styled-components（实践篇）

https://github.com/benawad/styled-components-example/blob/master/src/App2.js

import React, { Component } from 'react';
import logo from './logo.svg';

import styled, { keyframes } from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

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

const AppHeader = styled.div`
  background-color: ${ props => props.isBlack ? '#222' : "red" };
  height: 150px;
  padding: 20px;
  color: white;
  @media (min-width: 800px) {
    background-color: blue;
  }
`;

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

const AppLogoSpin = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;

const AppLogo = styled.img`
  animation: ${AppLogoSpin} infinite 20s linear;
  height: 80px;
`;

const AppTitle = styled.h1`
  font-size: 1.5em;
`;

class App extends Component {
  render() {
    return (
      <AppWrapper>
        <AppHeader isBlack={false}>
          <AppLogo src={logo} alt="logo" />
          <AppTitle>Welcome to React</AppTitle>
        </AppHeader>
        <AppIntro>
          To get started, edit <code>src/App.js</code> and save to reload.
        </AppIntro>
      </AppWrapper>
    );
  }
}

export default App;