react styled-components插件完成独立组件css样式(js重构css写法)

1、安装
	cnpm install styled-components --save
	
2、创建js文件,写全局样式

	import {createGlobalStyle} from 'styled-components'
	export const x= createGlobalStyle 
	`
		全局css样式
	`
3、在主入口文件中(App.js)

	import {x} from './xx.js'
	在标签所在任意位置放上即可
	<x />

4、一般标签样式(如div)

	(1)创建js文件
		import styled from 'styled-components'
		export const x=styled.div`
			css样式
		`
		若要给标签设置属性
		方式一:
			export const x=styled.a.attrs({属性键值对})`
				css样式
			`
		方式二:
			在别名标签上直接设置
			<x 属性></x>
			
	(2)使用
		import {x} from './style'
		则可以使用x来代替div
		<x></x>

5、选择器
	能兼容css/less选择器的写法,唯一不同的是通过&(当前元素)来开头进行选择

	export const x=styled.div`
			选择类名
			&.类名{  当前元素的类名
				样式
			}
			.类名{  选择的是子元素
				样式
			}
			
			选择子元素
			&>标签名/.类名/:hover
			{
				样式
			}
			
6、接收自定义标签上的参数
	<x 参数></x>
	接收:${(props)=>{return props.键名}}
	
7、往自定义标签中插入带有标签的内容
	自定义标签上添加如下属性
	
8、获取自定义标签dom
	之前版本是innerRef,目求ref就可以获取

8、使用阿里的iconfont字体图标
(1)导入如下文件

(2)iconfont.js文件如下
在每一个 以iconfont.开头的url字符串内,添加’./’
删除最下面的类名
创建createGlobalStyle导入全局使用
(3)在App.js中导入并使用

(4)使用

<i className=“iconfont”>&#xe615;</i>

代码示例:
全局样式js:

import {createGlobalStyle} from 'styled-components'

export const CreateGlobalStyle= createGlobalStyle `
body{
    margin:0;
    padding:0;
    font-family:sans-serif;
}
html{
    height:100%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
`

App.js:

import React,{Component} from 'react'
import Header from './common/header'
import {CreateGlobalStyle} from './style.js';
import {Icon} from './statics/iconfont/iconfont'
class App extends Component{

   render()
   {
       return(
           <div>
             <CreateGlobalStyle/>
             <Icon />
               <Header></Header>
           </div>
       )
   }
}

export default App

单独组件使用样式js:

import styled from 'styled-components'
import logoPic from '../../statics/logo.png';

export const HeaderWrapper=styled.div`
    z-index: 1;
    position: relative;
    height: 56px;
    border-bottom: 1px solid #f0f0f0;
`
export const Logo=styled.a.attrs({
    href:'/'
})`
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100px;
    height: 56px;
    background: url(${logoPic});
    background-size: contain;
`

export const Nav=styled.div`
    width: 960px;
    height: 100%;
    padding-right: 70px;
    box-sizing: border-box;
    margin: 0 auto;
`

export const NavItem=styled.div`
    line-height: 56px;
    padding: 0 15px;
    font-size: 17px;
    color: #333;
    &.left {
        float: left;

    }
    &.right {
        float: right;
        color: #969696;
    }
    &.active {
        color: #ea6f5a;
    }
    &>span:hover{
        color:blue;
    }

`
export const NavSearch=styled.input.attrs({
    placeholder:'搜索'
})`
    width: 160px;
    height: 38px;
    padding: 0 30px 0 20px;
    margin-top: 9px;
    margin-left: 20px;
    box-sizing: border-box;
    border: none;
    outline: none;
    border-radius: 19px;
    background: #eee;
    font-size: 14px;
    color: #666;
    &::placeholder {
        color: #999;
    }
    &.focused{
        width:240px;
    }

`

export const Addition=styled.div`
    position: absolute;
    right: 0;
    top: 0;
    height: 56px;

`
export const Button=styled.div`
    float: right;
    margin-top: 9px;
    margin-right: 20px;
    padding: 0 20px;
    line-height: 38px;
    border-radius: 19px;
    border: 1px solid #ec6149;
    font-siz: 14px;
    &.reg {
        color: #ec6149;
    }
    &.writting {
        color: #fff;
        background: #ec6149;
    }
`
export const SearchWrapper = styled.div`
	position: relative;
    float: left;

    .slide-enter{
        width:160px;
    }
    .slide-enter-active{
        width:240px;
        transition:all 2s ease-out;
    }
    .slide-enter-done{
        width:240px;
    }
    .slide-exit{
        width:240px;
    }
    .slide-exit{
        width:160px;
        transition:all 2s ease-out;
    }
    ..slide-exit-done{
        width:160px;
    }

	.zoom {
		position: absolute;
		right: 5px;
		bottom: 5px;
		width: 30px;
		line-height: 30px;
		border-radius: 15px;
		text-align: center;
		&.focused {
			background: #777;
			color: #fff;
		}
	}
`;

组件:

import React,{Component} from 'react'
import { CSSTransition } from 'react-transition-group';

import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    SearchWrapper
} from './style'

class App extends Component{

    state={
        focused:false
    }

    focus=()=>{
        this.setState({
            focused:true
        })
    }

    blur=()=>{
        this.setState({
            focused:false
        })
    }

    render()
    { 

       return(

           <HeaderWrapper>
               <Logo  />
               <Nav>
                    <NavItem className='left active'>首页 <span className='h'> 嗷嗷</span></NavItem>
                    <NavItem className='left'>下载App</NavItem>
                    <NavItem className='right'>登录</NavItem>
                    <NavItem className='right'>
                        <i className="iconfont">&#xe636;</i>
                    </NavItem>
                    <SearchWrapper>
                        <CSSTransition
							in={this.state.focused}
							timeout={2000}
							classNames="slide"
						>
                            <NavSearch 
                                className={this.state.focused ? 'focused':''}
                                onFocus={this.focus}
                                onBlur={this.blur}

                            />
                        </CSSTransition>
                        
                        <i className={this.state.focused ? 'focused iconfont zoom': 'iconfont zoom'}>&#xe614;</i>
                        
                    </SearchWrapper>
               </Nav>

               <Addition>
                    <Button className='writting'>
                        <i className="iconfont">&#xe615;</i>
                        写文章
                    </Button>
                    <Button className='reg'>注册</Button>
                </Addition>

           </HeaderWrapper>
       )
   }
}

export default App

示例

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { DetailWrapper, Header, Content } from './style';
// import { actionCreators } from './store';

class Detail extends PureComponent {
	render() {
		return (
			<DetailWrapper>
				<Header>{this.props.title}</Header>
				<Content 
					dangerouslySetInnerHTML={{__html: this.props.content}}
				/>
			</DetailWrapper>
		)
	}

	componentDidMount() {
        console.log(this.props.match.params.id);
        console.log(this.props)
	}
}

const mapState = (state) => ({
	title: state.getIn(['DetailReducer', 'title']),
	content: state.getIn(['DetailReducer', 'content'])
});

// const mapDispatch = (dispatch) => ({
// 	getDetail(id) {
// 		dispatch(actionCreators.getDetail(id));
// 	}
// });

export default connect(mapState)(withRouter(Detail));
// export default Detail;