废话不多话，来上车！

安装：

npm install --save styled-components   （或者 yarn add styled-components）

简述使用:

1、 创建全局的样式：

首先创建一个JS文件，例如style.js

①：import { createGlobalStyle } from 'styled-components' // 引全局包 ②：export const GlobalStyle = createGlobalStylemargin:0// ``里面为项目需要的css内容 ③：在react组件内 把引入的 GlobalStyle 当做标签写入

class App extends Component {        render() {            return ( 
     );        }      }

创建一个局部的样式

①：import styled from 'styled-components'; // 引局部包

②：export const HeaderWrapper = styled.div //里面为项目需要的css内容 ③：在react组件内 把引入的 HeaderWrapper 当做标签写入

class App extends Component {        render() {            return ( 
     );        }      }

3、类嵌套：（类似于less sass用法大同小异）

列举个项目实例：

export const SearchWrapper = styled.div`    position:relative;    float:left;    .iconfont{        position:absolute;    }`;

4、增加属性写法：

举例给A标签增加attrs属性:          export const Logo = styled.a.attrs({          href:'/'     })`

5、 设置当前元素内指定的class类

&.left{            float:left;        }        &::placeholder{            color:#999;        }

6、 styled-components 传值写法：

样式内js文件用props去接收                export const RecommendItem = styled.div`            background: url(${(props) => props.imgUrl});        `;                react组件内给样式JS文件传入需要的地址                
    

7、常见小坑：

引图片不要直接写行内样式，默认会转化为字符串，导致加载图片失败，可用如下方式：        import logoPic from '../../statics/logo.png';    export const Logo = styled.a`        background:url(${logoPic});    `;

整理不易，喜欢的话就顺手点个赞吧，您的赞会是我们继续分享的动力 ！