1. 先安装
   npm install --save styled-components
2. 创建样式组件 style.js
   表示一个组件元素div

import styled from 'styled-components'
export const HomeWrapper = styled.div`
  width: 960px;
  margin: 0 auto;
  height: 300px;
  background: red;
`

4. 使用样式组件

// 先引入组件
import {HomeWrapper} from './style.js'

<HomeWrapper>
</HomeWrapper>

4. 样式中可以写类名标签名伪元素伪类

import styled from 'styled-components'
import logoPic from '../../assets/logo.png'
export const HomeWrapper = styled.div`
  width: 960px;
  margin: 0 auto;
  height: 300px;
  background: url(${logoPic});
  &.green {
  	background: green;
  }
  span {
	font-size: 14px;	
	::before {
      content: '！！！';
    }
    :hover {
      color: red;
    }
  }
  
`

5. 嵌套使用 上下文选择

const Thing = styled.div`
    /* 应用于className为blue的Thing组件 */
    &.blue{
    color: blue;
    }

    /* 应用于className为red的Thing组件里的所有子组件或者html标签 */
    .red {
    color: red;
    }
    /* 应用于紧邻Thing组件的下一个Thing组件 */
    & + & {
    background: red;
    }

  `
  render(
    <React.Fragment>
      <Thing className="blue" >Thing组件</Thing>
      <Thing>
      <p className="red" >p标签</p>
      </Thing>
    </React.Fragment>
  )