React styled-components实现css布局并使用iconfont

        styled-components使用方式：在style.js文件中定义一个有样式的组件，组件中再去引入这个组件，进行页面的现实。

        使用styled-components这个第三方模块的好处：样式都写在style.js文件里，实际上const出来的常量是一个个带样式的组件。这些组件的样式是独享的，他们之间不会产生任何的影响，有效的避免了多个组件可能产生css样式冲突的问题。

(安装指令：npm install --save styled-components)

全局使用公共样式（含iconfont）：

// src > style.js
import { createGlobalStyle } from 'styled-components'

//reset css
export const Globalstyle = createGlobalStyle`
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;
}

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;
}
`

// src > statics > iconfont > iconfont.js
import { createGlobalStyle } from 'styled-components'

export const GlobalFont = createGlobalStyle`
@font-face {
  font-family: 'iconfont';  /* Project id 2980127 */
  src: url('//at.alicdn.com/t/font_2980127_k557uv6t8aa.woff2?t=1638348664368') format('woff2'),
       url('//at.alicdn.com/t/font_2980127_k557uv6t8aa.woff?t=1638348664368') format('woff'),
       url('//at.alicdn.com/t/font_2980127_k557uv6t8aa.ttf?t=1638348664368') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
`

// src > index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Globalstyle } from './style';
import { GlobalFont } from './statics/iconfont/iconfont'


ReactDOM.render(
  <React.Fragment>
    <Globalstyle />
    <GlobalFont />
    <App />
  </React.Fragment>,

  document.getElementById('root')
);

组件使用局部样式（含iconfont）：

// src > common > header > style.js
import styled from 'styled-components';
import logoPic from '../../statics/logo.png'
// 创建一个名叫HeaderWrapper的组件 是一个div
export const HeaderWrapper = styled.div`
  position:relative;
  height:56px;
  border-bottom:1px solid #f0f0f0;
`
//logo是个可以跳转的a标签
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%;
  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
  }
`

export const SearchWrapper = styled.div`
  float:left;
  position:relative;
  .iconfont{
    position:absolute;
    right:5px;
    bottom:5px;
    width:30px;
    line-height:30px;
    border-radius:15px;
    text-align:center;
    &.i_focused {
      background: #777;
      color:#fff
    }
  }
`

export const NavSearch = styled.input.attrs({
  placeholder: '搜索'
})`
  width:160px;
  height:38px;
  padding:0 30px 0 20px;
  box-sizing:border-box;
  margin-top:9px;
  margin-left:20px;
  border:none;
  border-radius:19px;
  background:#eee;
  font-size:14px;
  color:#777;
  &::placeholder{
    color:#999
  }
  &.focused{
    width:240px
  }
  &.slide-enter{
    transition: all .2s ease-out;
  }
  &.slide-enter-active{
    width: 240px;
  }
  &.slide-exit{
    transition: all .2s ease-out;
  }
  &.slide-exit-active{
    width: 160px;
  }
`

// src > common > header > index.js
import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";
import { HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, Button, SearchWrapper } from "./style";
export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      focused: false
    }
    this.handleInputFocus = this.handleInputFocus.bind(this)
    this.handleInputBlur = this.handleInputBlur.bind(this)
  }

  handleInputFocus() {
    this.setState({
      focused: true
    })
  }

  handleInputBlur() {
    this.setState({
      focused: false
    })
  }

  render() {
    return (
      <HeaderWrapper>
        <Logo />
        <Nav>
          <NavItem className="left active">首页</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={200}
              classNames="slide">
              <NavSearch
                className={this.state.focused && 'focused'}
                onFocus={this.handleInputFocus}
                onBlur={this.handleInputBlur}></NavSearch>
            </CSSTransition>
            <i className={this.state.focused ? 'i_focused iconfont' : 'iconfont'}>&#xe617;</i>
          </SearchWrapper>
        </Nav>
        <Addition>
          <Button className="writing">
            <i className="iconfont">&#xe652;</i>
            写文章</Button>
          <Button className="reg">注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}