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

左手的ㄟ右手 2021-07-24 18:57 348阅读 0赞

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)导入如下文件

![在这里插入图片描述][20200629160301796.png]  
(2)iconfont.js文件如下  
在每一个 以iconfont.开头的url字符串内,添加’./’  
删除最下面的类名  
创建createGlobalStyle导入全局使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70](3)在App.js中导入并使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]  
(4)使用

代码示例:  
全局样式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"></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'}></i>
                            
                        </SearchWrapper>
                   </Nav>
    
                   <Addition>
                        <Button className='writting'>
                            <i className="iconfont"></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;

[20200629160301796.png]: /images/20210724/5f4d207847d849b7aae7209a7897854f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/309d3fa0a45e4bbe9b178eb931120ee6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/746eba317c024602b2b69af74b74476d.png