实战Header组件：Styled-Componet完成Header布局

1. 如何写全局样式

我们可以通过引入样式组件并利用全局注入，来实现全局样式的使用。

目前看上去好像没有什么特别有用的地方，但是后面深入的时候可以看到组件自己的样式只对自己生效。

2. 样式统一

我们写的是一个PC网站，所以需要对所有浏览器的样式要统一，这里借助一个 Reset.css 文件，让不同浏览器对默认 HTML 元素的样式表现一致。只需要把下面的代码粘贴出来，放到全局样式中：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3. Header头部区块代码编写

3.1 初始化 Header 组件

这个头部区块是固定的，我们可以先创建一个公共组件文件夹，然后引出并在 App 组件中显示：

import React from 'react';
import { Header } from './common/header';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

export default App;

3.2 style.js

我们需要写只给 Header 使用的样式，这个时候这个 style.js 应该怎么写呢？

创建了一个 Wrapper 组件，其实就是一个 div，利用 styled-components 工具创建出来的，这个组件带有一些样式。接着我们就可以引入这个样式组件了：

import styled from 'styled-components';

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

这个样式组件只作用在当前组件上，不会冲突。

3.3 继续完成布局-Logo

其他一些样式尺寸可以参考简书，我们可以打开控制台工具看到尺寸。接着我们需要添加一个 Logo，可以放置一个 Logo 组件：

import React from 'react';
import { HeaderWrapper, Logo } from './style';
import logoPic from '../../statics/logo.png';

export const Header = () => {
  return (
    <HeaderWrapper>
      <Logo href="/" />
    </HeaderWrapper>
  );
};

接着我们去 style.js 里面定义这个样式组件，它有点击效果，所以应该是一个 a 标签组件：

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

export const Logo = styled.a`
  display: block;
  width: 100px;
  height: 56px;
  background: url(${logoPic});
 

3.4 继续完善中间部分

接下来需要继续完善中间部分的撰写工作。首先，我们需要编写一个Nav和其中的Item的样式组件。

请注意，Item在图中有一些是左浮动，有一些是右浮动。我们可以通过className来区分样式：

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 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.attrs({
    placeholder: '搜索'
})`
    width: 160px;
    height: 38px;
    padding: 0 20px;
    margin-top: 9px;
    margin-left: 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;
    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-size: 14px;
    &.reg {
        color: #ec6149;
    }
    &.writing {
        color: #fff;
        background: #ec6149;
    }
`;

最后，我们添加了一个Addition组件来处理按钮：

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-size: 14px;
    &.reg {
        color: #ec6149;
    }
    &.writing {
        color: #fff;
        background: #ec6149;
    }
`;

如果对样式细节不清楚，可以使用DevTools查看简书网站的CSS来进行调整。