使用styled-components 完成Header 组件布局

首先，我们在src 下面新建目录 common ,因为 Header 组件是很多页面都要共用的一个组件。

然后我们在common下新建目录header，再在header 目录下新建文件 index.js。

然后我们开始初始化这个组件，如下。

import React, { Component } from 'react';

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

export default Header;

然后在App.js 中引入，如下。

import React, { Component } from 'react';
import { GlobalStyle } from './style.js';
import Header from './common/header';

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

export default App;

下面，我们来写Header 组件的样式，我们在common/header 下创建文件 style.js 

import styled from 'styled-components';

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

然后呢，在Header 组件中我们可以引用它。如下。

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

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

export default Header;

下面，我们在src 下创建一个目录 statics，这个目录下，我们放置一些静态的文件，放一个小图标logo 进去。

然后我们再去引入这个logo。首先在styled-components 中定义这个组件。style.js 如下。

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

export const HeaderWrapper = styled.div`
  position: relative;
  height: 56px;
  border-bottom: 1px solid #f0f0f0;
`;

export const Logo = styled.a`
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100px;
  height: 56px;
  background: url(${logoPic});
  background-size: contain;
`;

然后在Header组件中使用它，如下。

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

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

export default Header;

然后，我们设置一下，点击logo 跳到根目录，如下。

    return (
      <HeaderWrapper>
        <Logo href='/'/>
      </HeaderWrapper>
    )

好。下面我们来做Header中间的区块。

首先也是来写一下style.js，样式定义组件。如下，我们又定义了一个叫Nav 的组件。还包括Nav 里面基本的子组件NavItem,如下。

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

index.js 如下。

import React, { Component } from 'react';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem
} from './style';

class Header extends Component {
  render () {
    return (
      <HeaderWrapper>
        <Logo href='/'/>
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载</NavItem>
          <NavItem className='right'>登录</NavItem>
          <NavItem className='right'>Aa</NavItem>
        </Nav>
      </HeaderWrapper>
    )
  }
}

export default Header;

下面我们来写一个搜索的基本样式，如下。

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

好。然后，Header 右侧的内容，它的结果如下。

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

class Header extends Component {
  render () {
    return (
      <HeaderWrapper>
        <Logo href='/'/>
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载</NavItem>
          <NavItem className='right'>登录</NavItem>
          <NavItem className='right'>Aa</NavItem>
          <NavSearch placeholder="搜索"></NavSearch>
        </Nav>
        <Addition>
        <Button className='writting'>写文章</Button>
          <Button className='reg'>注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}

export default Header;

样式 style.js 如下。

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

export const HeaderWrapper = styled.div`
  position: relative;
  height: 56px;
  border-bottom: 1px solid #f0f0f0;
`;

export const Logo = styled.a`
  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;
  }
`;

export const NavSearch = styled.input`
  width: 160px;
  height: 38px;
  margin-top: 9px;
  margin-left: 20px;
  padding: 0 20px;
  box-sizing: border-box;
  border: none;
  outline: none;
  border-radius: 19px;
  background: #eee;
  font-size: 14px;
  &::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: 20px;
  padding: 0 20px;
  line-height: 38px;
  border-radius: 19px;
  border: 1px solid #ec6149;
  font-size: 14px;
  &.reg {
    color: #ec6149;
  }
  &.writting {
    color: #fff;
    background: #ec6149;
  }
`;