styled-components的配置和使用

在react中，正常的给组件引入css文件，该css文件会直接作用于全局，使用styled-components可以有效控制好css作用域。

1、安装

yarn add styled-components

2、配置并设置全局样式，新建一个js文件，style.js，使用createGlobalStyle创建全局样式。

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
    body {
        line-height: 1;
        margin: 0;
        padding: 0;
	}

`

3、在app.js中引入style.js文件，然后将GlobalStyle当作组件放入render即可

import React, { Component } from 'react';
import { GlobalStyle } from "./style";

class App extends Component {
  render() {
    return (
      <div>
        <GlobalStyle/>
        hello world
      </div>
    );
  }
}

export default App;

4、局部样式,引入styled-components,设置一个div的样式，导出HeaderWrapper

import styled  from 'styled-components'

export const HeaderWrapper = styled.div`
	height: 56px;
	background: red;
`

5、引入style的HeaderWrapper，此时该标签其实是一个带有样式的div标签，将他作为一个标签替换原本render内的最外层div。

import React, { Component } from 'react'
import {
	HeaderWrapper
} from "./style";

class Header extends Component {
	render() {
		return (
			<HeaderWrapper>
				header
			</HeaderWrapper>
		)
	}
}

export default Header