React之styled-components

1：styled-components作用

解决 CSS 全局作用域的问题，使各个组件之间的样式互不影响

地址：https://www.styled-components.com/docs/basics

2：安装

npm install --save styled-components

3：在css文件里引入

import { injectGlobal } from 'styled-components';

注意：此时css文件可以改成js文件（例如改成style.js）

4:基本使用（style.js）

import styled from 'styled-components';

import logoPic from '../statics/jianshu.png';//引入图片

// 创建一个HeaderWrapper组件（其实质是：div+自定义样式）
export  const HeaderWrapper=styled.div`
    position:relative;//绝对定位
    height:58px;
    width:100%;
    border-bottom:1px solid #f0f0f0;
`;


export const Logo=styled.a.attrs({//添加属性等同（<a href='/'></a>）
    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:60%;
    height:100%;
    margin:0 auto;
    
`;

export const NavItem=styled.div`
    line-height:56px;
    padding:0 15px;
    font-size:17px
    color:#333
    // 为组件加上类选择器等于  className='left active'
    &.left{
        float:left
    }
    &.right{
        float:right
        color:#969696
    }
    &.active{
        color:#ea6f5a;
    }

`;
export  const  SearchWrapper=styled.div`
    position:relative;
    float:left;
    
    //为此组件内部的组件，类名为iconfont加上样式
    //               < SearchWrapper> 
    //                   < i className='iconfont'/>
    //               < /SearchWrapper>
    .iconfont{
        position:absolute;
        right:5px;
        bottom:5px;
        width:30px;
        line-height:30px;
        border-radius:15px;
        // background:green;
        text-aline:center;
    }
`;
export const NavSearch=styled.input.attrs({
    placeholder:'搜索'
})`
    width:160px;
    height:38px;
    padding:0 20px
    margin-top:9px;
    border:none;
    outline:none;
    background:#eee;
    box-sizing:border-box;
    border-radius:19px;
    font-size:13px;
    color:#666;
    //为此组件的placeholder属性加上样式
    &::placeholder{
         color:#999
    }
    
`;
export const Addition=styled.div`
     position:absolute;
     top:0;
     right:0    
     height:56px;
`;
export const Button=styled.div`
    float:right;
    margin-top:9px;
    margin-right:30px;
    padding:0 20px
    line-height:38px;
    border-radius:19px;
    border:1px solid #ec6149;
    &.reg{
        color:#ec6149;
    }
    &.writting{
        color:#fff;
        background:#ec6149;
    }
    

`;

5：引用style.js

import React, { Component } from 'react';

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

class App extends Component {

    render() {
        return (
            <HeaderWrapper>
                
                <Logo/>
                
                <Nav>
                    <NavItem className='left active'>首页</NavItem>
                    <NavItem className='left'>下载App</NavItem>

                    <NavItem className='right'>登录</NavItem>
                    <NavItem className='right'>Aa</NavItem>

                    <Addition>
                        <Button className='writting'>写文章</Button>
                        <Button className='reg'>注册</Button>
                    </Addition>

                    <SearchWrapper>
                        <NavSearch/>
                    </SearchWrapper>
                </Nav>

            </HeaderWrapper>
        );
    }
}

export default App;

6:效果图