styled-components的基础用法

styled-components主要是对css样式进行全局管理

最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ，而且用法也和之前的 injectGlobal 方法不同了。

全局reset的css样式可以如下写

使用方法：
1、安装：npm add styled-components
2、新建一个style.js文件

import {createGlobalStyle} from 'styled-components'
export const Globalstyle = createGlobalStyle`
body{
    margin: 0;
    padding: 0;
}
.dell{
    background-color: green;
}
`

3、引用：import {Globalstyle} from ‘./style’
组件放在 render() 中最外层元素下面

组件样式如下

style.js文件如下

import style from 'styled-components'
export const HeaderWrapper=style.div`
width:100%;
height:56px;
background:red;
`

组件中引入并使用

import {HeaderWrapper} from './style'
<HeaderWrapper>头部</HeaderWrapper>

相当于HeaderWrapper就是一个带有样式的div标签