React中styled-components的使用

cnpm i styled-components -S    ||    yarn add styled-components

import styled from "styled-components";

export const Header = styled.div`
  width:100%;
  height:1rem;
  background:red      
`

import {Header} from "./style/index";
class App extends Component{
　　render(){
　　　　return (
　　　　　　<Header/>
　　　　)
　　}
}

import { createGlobalStyle } from "styled-components";
export const GlobalStyle = createGlobalStyle`

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

fieldset, c{ border:none; }

img{display: block;}

address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }

ul, ol ,li{ list-style:none; }

body { color:#333; font:12px BASE "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;}

a { color:#666; text-decoration:none; }

*{box-sizing:border-box}

body,html,#root{
    height: 100%;
    overflow: hidden;
}

//将 <GlobalStyle /> 组件放在 render() 中最外层元素下面

import React, { Component ,Fragment} from 'react';
import {GlobalStyle} from "./reset";
class App extends Component {
　　render() {
　　　　return (
　　　　　　<Fragment>
　　　　　　　　<GlobalStyle/>
　　　　　　</Fragment>
　　　　);
　　}
}

export default App;

import {Header} from "style/index.js"

render(){
  return (
        <Header bgColor="red"/>  
    )  
}

import styled from "styled-components";
export const Header = styled.div`
　　width:100px;
　　height:200px;
　　props.bgColor}

const button = styled.button`
  border:0;
  width:100px;
  height:40px;
  text-align:center;
  color:#000;      
`

export const StyledButton = styled(button)`
  color:#fff;  
`

render(){
  return (
    <Header as="p"/>
  )  
}    

export const Input = styled.input.attrs({
    value:(props)=>props.value,
    name:"input"
})`
  border:0;
  width:100px;
  height:100px;
`

import logo from "./imgs/logo.png";

export const BgLogo =  styled.div`
  width:100px;
  height:200px;
  background:url(${logo}) no-repate;  
`

import React from "react";
import styled from "styled-components";

const Link = ({className,children})=>(
        <a className={className}>
             {children}
         </a>   
)    
export StyleLink = styled(Link)`
  color:red  
`

const move = keyframes`
  0%{
         transform:rotate(0%);  
   }  
  100%{
     transform :rotate(100%);

  }
`
export const TransFormDiv = styled.div`
   width:100px;
   height:100px;
   background:red;
   animation:${move} 2s;
`

export const StyledUl = styled.ul`
    border:1px solid #ccc;
    >li{
         border-bottom:1px solid #green;
         line-height:30px;
         padding-left:20px;      
        &>p{
            color:red

         }
    }